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

Question

我有一个非常简单的 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宽度，目前仅用于测试)，我想实现以下功能:

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

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

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

我发现悬停函数实际上可以处理 #2 和 #3，但我不知道如何让 #1 工作。我相当确定我知道为什么要进行这种特殊的尝试

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

失败。我猜测单击(或点击，在本例中)会触发悬停事件，该事件似乎优先，因此显示菜单，而不是隐藏它。

如何在移动设备上实现此功能？

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

HTML 列表结构如下，以防对某人有帮助(删节版):

    <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>

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