javascript - 使用 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();
    }
});​

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

当然，您需要对其进行样式设置，并确保清除任何 li 内的所有 float 。