Question

您好我正在尝试为我的侧边菜单栏添加滑动

在我的代码中，我有一个点击方法，我也需要一个滑动技术。
打开时我需要删除侧栏的内部图像，点击文档时应该关闭侧面菜单栏，列表图标应该再次出现。

使用Javascript：

$("#openMenuLayout").click(function(e){
      debugger;
            if ($('#menuLayout').hasClass('open-menu')){
          $('#menuLayout').removeClass('open-menu');
                $('#openMenuLayout').find('img').removeClass().addClass('open');


        } else {
          $('document, #menuLayout').addClass('open-menu');
                $('#openMenuLayout').find('img').removeClass();

        }
        e.preventDefault();
      });
$(document).click(function(e){

    if (!$("#menuLayout").is(e.target) && $("#menuLayout").has(e.target).length === 0) { 

           // Clicked outside, close menu
            $("#menuLayout").removeClass('open-menu');

    }

    });

HTML：

<div id="menuLayout">
    <a href="#menuLayout" id="openMenuLayout">
        <img class="open" src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' />
        <img class="close" src="http://seotobiz.com/images/icon_close.png" style='display:none;'/></a>
    <nav id="menuLayoutList">
      <ul>
        <li>
            <form id="search">
              <input type="search" placeholder="Search...">
            </form>
        </li>
        <li><a href="#homeLayout">Home</a></li>
        <li><a href="#aboutLayout">About Us</a></li>
        <li><a href="#KeyLayout">Key Facts</a></li>
        <li><a href="#teamLayout">Team</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#contactLayout">Contact</a></li>
      </ul>
    </nav>
  </div>

这是我到目前为止尝试过的演示链接：

Demo Link

Answer 1

使用像touchswipe http://labs.rampinteractive.co.uk/touchSwipe/demos/

这样的滑动插件肯定会更容易

至于图像，为什么不简单地使用.hide（）或.show（）？

使用Jquery滑动侧面菜单栏

1 个答案: