带有点击事件的 jQuery 下拉导航

Question

我需要使用 jQuery 创建一个简单的(2 级)下拉菜单。网络上有很多下拉菜单的解决方案，但它们都适用于悬停事件。为了确保它能在 iPhone 上工作，我想使用点击而不是悬停，但我遇到了问题。

HTML:

<ul class="nav nav-top" id="nav">
<li><a href="#">Menu Item 1</a></li>
<li>
    <a href="#">Menu Item 2</a>
    <ul class="nav">
        <li><a href="#">Submenu Item 1</a></li>
        <li><a href="#">Submenu Item 2</a></li>
        <li><a href="#">Submenu Item 3</a></li>
    </ul>   
</li>
<li>
    <a href="#">Menu Item 3</a>
    <ul class="nav">
        <li><a href="#">Submenu Item 1</a></li>
        <li><a href="#">Submenu Item 2</a></li>
        <li><a href="#">Submenu Item 3</a></li>
    </ul>
</li>
<li>
    <a href="#">Menu Item 4</a>
</li>

jQuery:

$(document).ready(function() {
$(".nav-top > li:has(ul)").toggle(function(e) {
    e.preventDefault();
    $(this).find('ul').show();
    $(this).addClass("expanded"); //This class set display:block to UL
},
function(e) {
    e.preventDefault();
    $(this).find('ul').hide();
    $(this).removeClass("expanded");
});

$(".nav-top > li:has(ul) ul").mouseup(function() {
    return false
});
$(document).mouseup(function(e) {
    if($(e.target).parent(".nav-top > li a").length==0) {
        $(".nav-top > li:has(ul)").removeClass("expanded");
        $(".nav-top > li:has(ul) ul").hide();
    }
});            

});

它无法正常工作。如果单击“菜单项 2”，然后单击一些位置而不是菜单，然后再次单击“菜单项 2”，它将不会显示下拉列表(参见示例: http://test.xhtml4u.ru/go/test.html )，我认为原因在 .toggle 函数中，但不知道如何修复它。

感谢您的帮助。

Answer 1

DEMO jsBin

代码:

$(document).ready(function(){
  $(".nav-top > li").click(function(e) {
    if($(this).has('ul')){
      $('.expanded').removeClass('expanded').hide();
    }
    $(this).find('ul').addClass('expanded').show();
  });

  $('.nav-top a').click(function(e){
    e.preventDefault();
  });
});