Question

我正在使用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>

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

Answer 1

您应该检查jquery mobile swipe documentation

Answer 2

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

Answer 3

似乎我迟到了，但您可能想尝试这个简单的代码（当然，您需要修改它以适合您的代码）

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

您需要在支持触控的设备中试用此功能。用鼠标滑动似乎不起作用我正在为可转换的侧面菜单编写我自己的自定义jQuery插件，并且很震惊。这是我的question.

侧边菜单滑动功能

3 个答案: