mmenu - 如何在使用两个菜单时获得“拖动打开”插件？

【问题标题】：mmenu - how to get the 'Drag open' Add-on on working with two menus?mmenu - 如何在使用两个菜单时获得“拖动打开”插件？
【发布时间】：2015-07-13 13:25:28
【问题描述】：

要通过滑动手势打开菜单，您可以在初始化菜单时包含hammer.js并在选项中配置插件（参见http://mmenu.frebsite.nl/documentation/addons/drag-open.html）：

_JQ('#rightMenu').mmenu({        
    dragOpen: true
}, {
    // configuration
    clone: true
});

_JQ('#leftMenu').mmenu({        
    dragOpen: true
}, {
    // configuration
    clone: true
});

这适用于一个菜单，但由于我在一个站点上有两个菜单（一个从左侧打开，一个从右侧打开），该插件仅适用于第一个（左侧）菜单，但不在第二个（右）菜单上。如何让它在两个菜单上都起作用？

【问题讨论】：

标签： swipe mmenu

【解决方案1】：

假设：
1. 菜单有“left-menu”和“right-menu”等ID。
2. 页面上有几个链接，您可以点击打开eatch 菜单。
3.链接ID为“left-menu-link”和“right-menu-link”。
4. 您将执行“swiperight”或“swipeleft”操作的 DIV 区域有一个名为“swipeble-area”的 CSS 类。
您可以加载 jQueryMobile（最终仅使用所需的函数。）并使用相同的脚本，如下所示：

$(document).ready(function () {
    $("div.swipeble-area").on("swipeleft swiperight", function (e) {
        if ($("#left-menu").css("display") == "none" && $("#right-menu").css("display") == "none") {
            if (e.type === "swiperight") {
                $("#left-menu-link").click();
            } else if (e.type === "swipeleft") {
                $("#right-menu-link").click();
            }
        }
    });
});

希望这有用。

【讨论】：