Question

我需要使用jQuery创建一个简单的（2级）下拉菜单。 Web下拉菜单有很多解决方案，但它们都适用于悬停事件。为了确保它能够在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();
  });
});

jQuery使用click事件下拉导航

1 个答案:

DEMO jsBin