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'); 
   }); 
});

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

3 个答案: