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

Question

这是我的目标示例：

---

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

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

有关如何构建精心制作的下拉导航菜单的任何建议？

Answer 1

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

我用一个例子设置了一个小提琴，这是代码：

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直接子元素，如果有，我们隐藏它们。

当然，您需要对其进行样式设置，并确保清除 any 中的任何浮动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'); 
   }); 
});