mmenu关闭所有子菜单并返回顶层默认状态

Question

我使用的是mmenu JQuery插件(http://mmenu.frebsite.nl/)

我能够浏览菜单、打开菜单、关闭菜单等。

但是，当菜单关闭时，我想要做的是重置菜单-这样每次打开并触发侧边菜单时，它都将从默认状态开始。

我的菜单被设置为默认状态，带有画布外行为和滑动子菜单。

当菜单关闭时，我可以得到一个回调：

var api = $("#menu").data( "mmenu" );
api.bind( "closed", function() {
alert("menu closed");
});

我找到了其他的建议来做：

api.closeAllPanels();

或者：

api.closeAllSubmenus();

但这两种方法都不管用。

我还尝试了以下链接中的潜在方法：

https://github.com/BeSite/jQuery.mmenu/issues/237

Jquery mmenu - Reset menu to main level on close

https://www.drupal.org/node/2352421

有没有人在每次触发菜单时都能让菜单返回到默认状态？

Answer 1

将两者结合起来应该是可行的：

var api = $("#menu").data( "mmenu" );
api.bind( "closed", function() {
    api.closeAllPanels();
});

Answer 2

我可以通过在我的菜单中添加一个javascript函数来解决这个问题，它使我的菜单能够导航到home级别(#mm-1)。它还允许您通过将相对链接作为参数传递来打开任何面板。请看下面的代码：

HTML

            <div class="mh-head navbar-fixed-top">
            <span class="mh-btns-left"><a class="fa fa-bars" 
            onclick="openSubmenu('#mm-1')"></a></span>
            </div>

Javascript

            function openSubmenu(submenu) {
                instantiateComponents(submenu);
                openDesiredSubmenu();
            }

            function instantiateComponents(submenu) {
                instantiateCurrentMenu();
                instantiateApi();
                instantiateDesiredSubmenu(submenu);
            }

            function instantiateCurrentMenu() {
                currentMenu = $('#menu');
                currentMenu.mmenu({});
            }

            function instantiateApi() {
                menuApi = currentMenu.data('mmenu');
            }

            function instantiateDesiredSubmenu(submenu) {
                desiredSubmenu = currentMenu.find(submenu);
            }

            function openDesiredSubmenu() {
                menuApi.openPanel(desiredSubmenu.closest('.mm-panel')); 
                menuApi.open();
            }

希望这能对你有所帮助。