Using jquery mmenu, how to close one submenu when I open another submenu?

Question

I'm building a (Drupal 7.5) site where I use mmenu (Mobile Sliding Menu) module to create the menu. When I click the trigger, the main menu items appears. Some of the main items have a submenu. When I click the trigger for those submenus, the submenu opens, so far so good.

When I then click another submenu trigger, that submenu opens, but the previously opened submenu stays open as well. What do I need to change to have only ever one submenu open at any one time (i.e. triggering a new submenu closes one that was opened before)? There is no setting for this in the mmenu configuration (drupal module), and no instructions on this on the mmenu website (http://mmenu.frebsite.nl).

Many thanks for any help on this.

Answer 1

The easiest method I can think of is to use JS or jQuery to trap the click for every sub-menu item then, onclick, cache a reference to the clicked item, then programmatically close all of the open sub-menus with a loop, skipping the clicked item.

Try something like this:

(function ($, undefined) {

  // Execute once the DOM is loaded.
  $(document).ready(function () {
    // List of expandable sub-menu items.
    var subs = $('.mm-subopen');

    // Iterate through each sub-menu item...
    $(subs).each(function () {

      // Set up onclick handler...
      $(this).click(function () {

        // Cache reference to clicked item.
        var clicked = this;

        // Iterate through list of sub-menu items...
        for(i=0,c=subs.length;i<c;i++) {

          // If current item is not the clicked item...
          if (subs[i] !== clicked) {

            // Get reference to parent <li>, then remove the mm-opened class.
            var parent = $(subs[i]).closest('li');
            $(parent).removeClass('mm-opened');
          }
        }
      });
    });
  });
})(jQuery);

You might need to modify for nested sub-menus, but I hope this helps!

Answer 2

HTML

<nav>
    <ul>
         <li><a></a></li>
             <ul class="sub-menu">
                 <li><a></a></li>
                 <li><a></a></li>
                 <li><a></a></li>
             </ul>
         </li>
    </ul>
</nav>

CSS

.sub-menu { display: none; }

JQUERY

$("ul > li > a").click(function () {
   var _parent      = $(this).parents("ul");
   var _children    = $(".sub-menu", _parent);
   var _nextElement = $(this).next();

   _children.css({ "display":"none" });
   _nextElement.css({ "display":"block" });

});