Geek Answers Handbook

Click to close the jQuery drop-down menu on mobile devices while maintaining a different behavior

I have a pretty simple jQuery drop-down menu with links in the normal ul / li list location. The code for the dropdown is as follows:

$('body').ready(function() { if(screen.width <= 720) { $('.dropdown').hover(function() { $(this).find('.subMenu').toggle(); }); $('.dropdown').click(function() { if( $('this').css('display') != 'none') { $('this').toggle(); } }); } else { $('.dropdown').hover( function() { $(this).stop(true,true).find('.subMenu').slideDown("fast"); }, function() { $(this).stop(true,true).find('.subMenu').hide(); } ); } });

On mobile devices (ignore the width of 720, it's just for testing right now), I would like to get the following functions:

  • Disables communication with the drop-down menu> If the menu is open, close it

  • Disables communication between the user when another menu is already open. > Close previous menu, open current menu

  • The user deletes somewhere else on the page> Close all open menus.

I found that the hover function actually handles # 2 and # 3, but I can't figure out how to get # 1. I'm sure I know why this particular attempt

 $('.dropdown').click(function() { if( $('this').css('display') != 'none') { $('this').toggle(); } });

fails. I assume that clicking (or tap in this case) triggers the hover event, which seems to take precedence and therefore displays the menu rather than hiding it.

How can I make this work on mobile devices?

Edit: I am using jQuery v1.7.2

The structure of the HTML list is as follows if it helps someone (shortened version):

  <div id="navbar"> <ul> <li class="dropdown"><a href="#">Link A</a></li> <li class="dropdown"><a href="#">Link B</a> <ul class="subMenu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> </ul> </div>
0
source share
4 answers

If you are using jq 1.7+ try this DEMO HERE http://jsfiddle.net/SCN5T/3/

 $(function(){ $(document).mousedown(function(){ $('.dropdown .active').removeClass('active').children('ul').hide(); }) $('.dropdown').on('mousedown','.subMenu', function(e){ e.stopPropagation(); var elem = $(this); if(elem.is('.active')) { elem.children('ul').slideUp(150); elem.removeClass('active'); } else { $('.dropdown .active').removeClass('active').children('ul').hide(); elem.addClass('active').children('ul').slideDown(150); } }); $('.subMenu').on('mousedown','ul', function(e){ e.stopPropagation(); alert('menu item clicked'); }); })
+1
source

if ($ ('this'). css ('display')! = 'none') can be replaced with if ($ ('this'). is (': hidden'))

you can use .siblings () to close other menus ... cant see the html code to find out what the selector should look like.

As an option, you can add some class to check if there are other open menus ...

  $('.dropdown').hover(function() { $('.openedMenu .subMenu').hide().removeClass('openedMenu'); $(this).find('.subMenu').toggle(); $(this).addClass('openedMenu'); }); $('.dropdown').click(function() { if( $('this').is(':hidden')) { $('this').toggle(); } });
+1
source

I only worked in one mobile web project, but I had problems with the click event. I used jQuery mobile framework. The workaround was to use the tap event included in jQm rather than a click. I suppose you are not using jQuery mobile, I found this plugin that will help you create tap events: http://aanandprasad.com/articles/jquery-tappable/

+1
source

The following bit of code did the trick for my specific problem:

 $('html').mousedown(function() { $('.subMenu').hide(); }); $('#navbar').mousedown(function(event) { event.stopPropagation(); }); $('.dropdown').mousedown(function() { var ele = $(this).find('.subMenu'); $('#navbar').find('.subMenu').each(function(index) { if(!$(this).is(ele)) $(this).hide(); } ); ele.toggle(); });

The main idea that I followed was to find subMenus when receiving the mousedown event and hide them, unless the item was a menu that the user clicked on. Then the switch toggles or hides the menu. The event propagation part and the body / html hide part relate to acrashik's answer, and changing $('html') comes from this.

0
source

More articles:


All Articles