Closing menu on touch device

I am having this problem too. Has anyone found a solution to it yet?

Thank you

@hwasem: I have found a solution. I figured out that there were 2 spans called class=toggle. Both had identical looking parents, however only the second one had the complete structure of the menu. Both spans and their parents were stacked on top of each other. The second span is nested in the first span. When the MENU icon was clicked, the first span and it's parent were targeted and the menu would then expand as expected because the first span was then hidden and the user could then view the menu underneath because the second span (containing the menu) could display. However because there were 2 spans of the same class name and identical looking parents, the code assumed the first span and it's parent were then being targeted again in the javascript when the user clicked the MENU icon again to close. And because the first span was now hidden and the javascript was targeting only the first span, the toggleClass in the javascript wasn’t removing the ‘responsive-toggled’ class, therefore the menu wouldn't close. The second span needed to be targeted in the javascript because it was the one that was open and getting the click event, but ‘responsive-toggled’ class needed to be removed from it’s great grand parent div to close it, not it’s parent.

<div class="parent">
    <span class="toggle">
        <div class="toggle-inner">☰ Menu</div>
    </span>
    <div class="menu">
        <h2><span>Site Menu</span></h2>
                <!--No menu here-->
     
      <div class="parent">
          <span class="toggle">
              <div class="toggle-inner">☰ Menu</div>
          </span>
              <div class="menu">
                  <div class="wet-boew-menubar mb-mega" data-load="menubar">
                      <div>
                  <!-- region: Mega Menu -->
                             <ul>
                                  <li>....</li>
                                  <li>....</li>
                                  <li>....</li>
                                  <li>....</li>
                              </ul>
                         </div>
                       </div>
                    </div>
                 </div>
              </div>
            </div>

responsive_menus_simple.js:

(function ($) {
    /**
    * Handle clicks & toggling the menu.
    */
    var toggler_click = function () {
        if ($(this).parent().parent().hasClass('responsive-menus-simple')) { //If the second span has been opened
            $(this).parent().parent().parent().removeClass('responsive-toggled'); //Remove class on the second span, close the menu
        }
        else {
            $(this).parent().addClass('responsive-toggled'); //Will fire ONCE when menu is clicked the first time. Only applied to 1st span
        }

    };

The way this works is the condition statement evaluates to see if the second span has been opened. The first time it goes through the user has clicked on the first span (The spans were stacked on top of each other only the first span is accessible the first time) and thus the user has not clicked the second span, so the else will run. The first span will be hidden and the second span will be reveled underneath. The menu is now expanded. The second time it goes through the second span is open so the condition is now true and the first scenario is run. Closing the second span. Since the second span is nested in the first span. We must target the great-grandparent to close the menu.

The toggle (close state) is still not working specially in the mobile devices, has anybody found a workaround for it?

I guess the solution suggested by the @mazz0016 is for the tb_sirate and that is using the in built tb_mega_menu for rendering the menu, responsive_menus_simple.js seems to be the file of that theme only.

Experiencing same issue. For now, I just added a quick jQuery workaround.

(function($) {
Drupal.behaviors.drupaldeveloper = {
attach: function (context) {
$('a.dropdown-toggle').focusout(function() {
$(this).parent('li').removeClass('open');
})
}
}
})(jQuery);

Yes, its in my custom js. I am sorry its not working for you. Not sure how helpful this is but I am working on making the menu more keyboard accessible as well (and thus changing my custom jQuery completely). Here is that I have - its not complete but does few things well. Hope this helps!

            $('.nav > li.mega').click(function(event) {
                if(!$(this).hasClass('open')){
                    $(this).addClass('open');
                } else {
                    $(this).removeClass('open');
                }
                $(this).prev('.nav > li.mega').removeClass('open');
                $(this).next('.nav > li.mega').removeClass('open');
            })
            $('.nav > li.mega').focusout(function() {
                $(this).prev('.nav > li.mega').removeClass('open');
                $(this).next('.nav > li.mega').removeClass('open');
            })

Hmm interesting. I am working on TB Mega menu 7.x-1.0-beta3 on Bootstrap theme 7.x-3.1-beta2 and jQuery 1.9.
And I have tested this on several iOS devices, Android devices and Windows phones as well..

Hey dsrikanth,

Thanks for the solutions in #7 and #9. It seems to work for me on mobile device.

Also, adding this code (https://www.drupal.org/node/2274909#comment-9071921) helped solve having to hit level-1 menu items twice to expand the sub-nav.

Hope this helps someone in the future. Adding this comment so I can remember this fix for future projects.

I've fixed it with this little code, just put it on a custom JS file. I hope you find it useful.

$('.nav > li.mega').click(function(event) {
    if (!$(this).hasClass('open-fix')) {
        $("ul.tb-megamenu-nav li").removeClass("open-fix");
        $(this).addClass('open-fix');
        if (!$(this).hasClass('open')) {
            $(this).addClass('open');
        }
    } else {
        $(this).removeClass('open-fix');
        $(this).removeClass('open');
    }
});

Best regards!

#13 worked great, thank you! I had an additional problem though, which was that not only were menus not closing if you clicked again on the same top menu item, but they also would not close if you clicked on a different menu item - so if you click on menu item 1, and the submenu for that item appears, then you click on menu item 2 without first closing submenu1, then submenu1 would stay open and the submenu for item 2 would appear stacked over the top of submenu1. So I just altered the code from #13 very slightly to close all submenus when any top menu item is clicked, then open the submenu for just the clicked item. (Since I'm a JQuery idiot, I'm also including here the 'on document ready' code that is required for the function to work. The code below, copied and pasted directly into JS Injector, solved all menu problems for me on touch devices.)

(function ($) {
 $(document).ready(function() {
   $('.nav > li.mega').click(function(event) {
	   
	 if (!$(this).hasClass('open-fix')) {
		 //MENU IS CLOSED
         $("ul.tb-megamenu-nav li").removeClass("open-fix");
         $("ul.tb-megamenu-nav li").removeClass("open");
         $(this).addClass('open-fix');
         $(this).addClass('open');
    } else {
		//MENU IS OPEN
        $(this).removeClass('open-fix');
        $(this).removeClass('open');
    }
	
   });
 });
})(jQuery);

hwasem you solution worked for me. No problem so far. Thank you :)

i have include de js-code from hwasem an also neschi in js injector by drupal.
It doesn't work on IPAD.
The dropdown still not close when you touch the screen somewher!!!

if this does not work on iPad, please take TB MEGA MENU off the market from drupal !

Hello all, I've created a patch for this module to resolve this issue and maintain all of the old functionalities.

Now if a link has a submenu, you can open and close the menu freely.

If you click anywhere outside the meganav, all of the menus are closed.

I tested the patch in #19, but it didn't work for me for a couple of reasons:

• While it does let you tap on an open top level menu item to close the dropdown, we don't necessarily want that behavior. Some top level links are linked to pages, so the current functionality is that the first tap opens the menu and the second tap takes you to the link.
• We need to preserve the above functionality, while also providing the ability to tap away from the menu to close the dropdown. Patch #19 allows for tapping away on most devices but does not work on iOS.

The attached patch provides the ability to tap on another top level menu item, or tap away from the menu (ie, anywhere else on the screen) in order to close the currently open menu item. Testing should be performed on both touch desktops and iOS.