使用 Jquery 滑动侧菜单栏答案

【问题标题】：Swipe of Side Menu Bar using Jquery使用 Jquery 滑动侧菜单栏
【发布时间】：2014-02-13 12:48:16
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

使用像touchswipe http://labs.rampinteractive.co.uk/touchSwipe/demos/这样的滑动插件肯定会更容易

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

【讨论】：