侧边菜单滑动功能

Posted 2023-05-09

【中文标题】侧边菜单滑动功能

【英文标题】：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，因此如果您使用的是该框架，它具有内置的滑动功能

【参考方案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.