mmenu close all submenus and return to top level default state

问题

I am using the mmenu JQuery plugin (http://mmenu.frebsite.nl/)

I am able to navigate through the menu, open the menu, close the menu, etc.

What I want to do, though, when the menu is closed, is to reset the menu - so that each time the side menu is opened and fired, it will always start from the default state.

My menu is set up as the default state, with offcanvas behaviour and sliding submenus.

I am able to get a callback when the menu is closed:

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

I have found other suggestions to do:

api.closeAllPanels();

or:

api.closeAllSubmenus();

But neither of these work.

I have also tried potential methods from the following links:

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

Jquery mmenu - Reset menu to main level on close

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

Has anyone managed to get the menu to return back to the default state each time the menu is fired?

回答1:

Combining the two should work:

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

回答2:

I was able to solve this by adding a javascript function to my menu, which enables it to navigate to the home level (#mm-1). It also allows you to open any panel by passing the relative link as a parameter. Please take a look at the following code:

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();
            }

Hope this is helpful.

来源：https://stackoverflow.com/questions/33617684/mmenu-close-all-submenus-and-return-to-top-level-default-state

标签

jquery

mmenu