侧边菜单滑动功能答案

【问题标题】：Side menu swipe functionality侧边菜单滑动功能
【发布时间】：2015-07-29 20:51:28
【问题描述】：

我在我的应用程序中使用 Sidr jQuery 插件作为侧边菜单。目前，侧边菜单会在单击按钮时切换（打开和关闭）。

HTML：

<a id="right-menu" href="#sidr-menu">
 <button type="button" class="navbar-toggle">LOGIN/&nbsp;SIGNUP
 </button>
</a>

<div id="sidr" class="sidr right">
 <nav class="nav">
  <ul>
   <li>
    <a  class="page-scroll" href="{% url 'login' %}">LOGIN</a>
   </li>
   <li>
    <a class="page-scroll" href="{% url 'signup' %}">SIGN UP</a>
   </li>
  </ul>
 </div>

jQuery:

<script>
 $('#right-menu').sidr({
 name: 'sidr-right',
 side: 'right',
 source:'#sidr',
 });
</script>

现在我想为移动设备添加滑动功能，以便用户可以轻松地向左滑动（打开侧边菜单）或向右滑动（关闭侧边菜单）。我如何实现这一目标？我使用什么库？

【问题讨论】：

hammer js 或 touchswipe js 是流行且易于使用的插件。您标记了您的问题 JQM，因此如果您使用的是该框架，它具有内置的滑动功能

标签： javascript jquery html jquery-mobile swipe

【解决方案1】：

你应该检查jquery mobile swipe documentation

【讨论】：

【解决方案2】：

新增了IONIC框架。它会为你做所有必要的事情。

【讨论】：

【解决方案3】：

我好像来晚了，不过你可能想试试这个简单的代码（当然，你需要修改它以适合你的代码）

<script>
      $(window).touchwipe({
        wipeLeft: function() {
          // Close
          $.sidr('close', 'sidr-main');
        },
        wipeRight: function() {
          // Open
          $.sidr('open', 'sidr-main');
        },
        preventDefaultEvents: false
      });
</script>

您需要在支持触控的设备中尝试此操作。用鼠标滑动似乎不起作用。
我正在为可滑动的侧边菜单编写我自己的自定义 jQuery 插件并被打动了。这是我的question.

【讨论】：