单击以关闭移动设备上的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');
    });       
})

Answer 2

if( $('this').css('display') !=‘none’可以替换为if($(‘this’).is(‘：隐藏’))

您可以使用.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中，而不是单击。由于我猜您没有使用jQuery手机，我发现了这个插件，它可以帮助您创建‘点击’事件：http://aanandprasad.com/articles/jquery-tappable/