带有点击事件的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();
  });
});