单击以关闭移动设备上的jQuery下拉菜单，同时保留其他行为

我有一个非常简单的jQuery下拉菜单，其中包含通常的ul / li列表排列中的链接。 下拉列表的代码如下：

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

在移动设备上（忽略720宽度，它仅用于测试），我想实现以下function：

• 用户点击链接下拉菜单>如果菜单已打开，请将其关闭

• 用户点击链接而另一个菜单已打开>关闭上一级菜单，打开当前菜单

• 用户点击页面上的其他位置>关闭所有打开的菜单

我发现hoverfunction实际上处理＃2和＃3，但我无法弄清楚如何让＃1工作。 我很确定我知道为什么这个特殊的尝试

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

失败。 我猜测点击（或点击，在这种情况下）触发hover事件，这似乎优先，因此显示菜单，而不是隐藏它。

我怎样才能在移动设备上使用它？

编辑：我正在使用jQuery v1.7.2

HTML列表结构如下，以防有人（删节版）：

  
 
 
Link A
 
Link B 
 
Link 1
 
Link 2
 
 
 
  

Answer 1

如果你使用jq 1.7+然后在这里尝试这个演示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'); }); }) 

Answer 2

if（$（’this’）。css（’display’）！=’none’）可以替换为if（$（’this’）。is（’：hidden’））

你可以使用.siblings（）来关闭其他菜单…不能看到html代码来告诉选择器应该是什么样子。

作为选项，您可以添加一些类来检查是否有其他打开的菜单…

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

Answer 3

我只参与了一个移动网络项目，但我也遇到了点击事件的问题。 我使用的是jQuery移动框架。 解决方法是使用’tap’事件，包含在jQm而不是click中。 因为我猜你没有使用jQuery mobile，我发现这个插件可以帮助你创建“点击”事件： http ： //aanandprasad.com/articles/jquery-tappable/

Answer 4

以下代码为我的特定问题做了诀窍：

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

我遵循的基本思想是在接收mousedown事件时找到subMenus并隐藏它们，除非该元素是用户点击的菜单。 切换然后显示或隐藏菜单。 事件传播部分和body / html隐藏部分来自acrashik的答案，而$('html')的更改来自此答案 。