使用 jQuery 创建一个简单的子菜单下拉菜单

Question

这是我的目标example：

---

我不喜欢我必须用类装饰li 元素才能正确触发事件。如果我有多个嵌套类别下拉菜单会怎样？事情很快就会变得一团糟！

离开事件捕获区域后，如果不关闭它，我似乎也无法选择一个选项。

关于如何构建一个精心设计的下拉导航菜单有什么建议吗？

Answer 1

你真的不需要任何巧妙地使用选择器的类：P

我用一个例子设置了fiddle，代码如下：

HTML：

<nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li>
            <a href="#">OFFERS</a>
            <ul>
                <li>
                    <a href="#">NEW</a>
                    <ul>
                        <li>YAY!</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">SETTINGS</a></li>
        <li><a href="#">TV's</a></li>
        <li><a href="#">COMPUTERS</a></li>
        <li><a href="#">RICE</a></li>
    </ul>
</nav>​

如您所见，不需要单个类/id :P 元素“OFFERS”是唯一具有下拉菜单的元素，并且在该菜单中，元素“NEW”还有另一个。

CSS：

li > ul { display: none; }
li li { margin-left: 10px; }

第一种风格很重要。首先，我们希望隐藏我们的子菜单。另一种风格只是为了清楚起见。

jQuery:

$("nav ul li").hover(function(){
    if ($("> ul", this).length > 0) {
        $("> ul", this).show();
    }
}, function(){
    if ($("> ul", this).length > 0) {
        $("> ul", this).hide();
    }
});​

是的，就这么简单:) 当我们hover 一个菜单元素时，我们检查它是否有任何ul 直接子元素，如果有，我们显示它们。当我们离开菜单元素时，我们再次检查它是否有任何ul 直接子元素，如果有，我们隐藏它们。

当然，您需要对其进行样式设置，并确保清除任何 li 中的任何浮动。

Answer 2

您需要使用类来正确控制流程。尤其是在你的外容器上。

例如，在我的菜单中，我有一个包含所有菜单的ul，每个菜单项都是一个li。 li 内是第一级标题，还有另一个包含子菜单的 ul。

<ul class="menu">
    <li>
        Item 1
        <ul><!--Further items--></ul>
    </li>
    <li>
        Item 2
        <ul><!--Further items--></ul>
    </li>
</ul>

然后您可以使用子选择器来控制它。虽然有时简单地使用一个类更容易。

$(".menu > li") //First level items
$(".menu > li > ul") //Submenus

假设您想让菜单在您单击一级项目时向下滑动：

$(".menu > li").click(function() {
    $this = $(this); //Caching. Not really needed for this example. But anyway :)
    $this.children("ul").slideToggle("fast");
});

Answer 3

$(document).ready( function(){ 
   $("ul.MenuNavi li").mouseover(function(){ 
     $(this).children('ul').slideDown('3000'); 
   }); 
   $("ul.MenuNavi li").mouseleave(function(){                    
     $(this).children('ul').stop(true).slideUp('3000'); 
   }); 
});