javascript - mmenu插件检查滑动是否完成

Question

我有一些 CSS 可以在整个页面上添加一个 div。

我将此 css 应用于 div:
.full-width {
position:relative；
margin :0 -9999rem;
填充:.25rem 9999rem;
背景:#e92428;
颜色:白色；
字体大小:1.125rem;
高度:100px;

当我点击 mmenu 插件的菜单按钮时，div 仍然在菜单的上方。
为了解决这个问题，我从 div 中删除了 css，当用户点击菜单图标时它会横跨整个屏幕。
我现在的问题是，当用户单击主页以将其滑回原位时，将 css 应用回 div。
我在哪里可以检查用户是否单击了主页，以便我可以将 css 重新添加到我的 div？

Answer 1

单击时 Mmenu 触发事件:opening、opened、closing、closed。看起来您想将 opened 函数与您的 CSS 结合起来。以下是如何触发每个函数:

jQuery('#mmenu').data('mmenu').bind('opening', function(){
    //When mmenu has started opening
}).bind('opened', function(){
    //After mmenu has finished opening
}).bind('closing', function(){
    //When mmenu has started closing
}).bind('closed', function(){
    //After mmenu has finished closing
});

显然，更改 #menu jQuery 选择器以匹配您的选择器。

话虽这么说，如果您正在为 z-index 苦苦挣扎，您可能需要查看 mmenu init offCanvas 选项的 zposition 以便它保留在前面(因为默认是 back):

jQuery('#mmenu').mmenu({
    offCanvas: {
        zposition: "front", //"back" (default), "front", "next"
        position: "left" //"left" (default), "right", "top", "bottom"
    }
});