使用jQuery滑动侧边菜单栏

Question

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

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

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>

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

演示链接

Answer 1

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

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