Search code examples
javascriptangularjsmmenu

mmenu: expand only one submenu at a time (slidingSubmenus: false)


I like to use mmenu: http://mmenu.frebsite.nl/ in my Web project. I should set slidingSubmenus: false but to save vertical space, I should automatically collapse the previous expanded submenu, if a new submenu is expanded - i.e. only one submenu shall be expanded at the time. These are requirements of the customer.

Please have a look at this example: http://plnkr.co/edit/O2CCBYuXtxnHH7wbdqMa?p=preview [1]

If we expand About us, then About us 2, the first one should be collapsed.

Is this possible using native settings or with a simple trick?
I also found How to toggle the vertical jQuery.mmenu submenus?, but I hope for a cleaner solution
- badera

[1] Thanks to ankoehn (https://stackoverflow.com/users/5174279/ankoehn) for his answer https://stackoverflow.com/a/31727879/4106030 (it is the base of my plunker - I need also a solution for AngularJS).


Solution

  • Since you are using jQuery, you could add some jQuery to do this:

    jQuery(document).ready(function(){
     $('.mm-next').click(function(){
       var myMenu = $(this).closest('.mm-vertical');
       $('.mm-vertical').not(myMenu).removeClass('mm-opened');
      })
    })
    

    Updated plunker http://plnkr.co/edit/3kr45X8fPnGMo64wXc7j?p=preview

    This simply removes the opened class from items other than the current one you have opened.