jquery - Jquery下拉工作正常......但可能会更好

Question

这是我的工作下拉菜单...

http://jsfiddle.net/NAyWQ/7/

它完成了这项工作，它几乎是我目前需要的所有功能......但是我觉得它可以优化一下。即，有没有办法在没有边界 div 的情况下做到这一点？此外，如果我回到菜单，下拉菜单会重新触发，这没什么大不了的，但最好防止这种行为。

任何建议/调整将不胜感激。

Answer 1

根据@AndrewMilson 的示例，您可以这样做：

$("#press, #contact, #about").hover(function(){
    $("#dd_" + this.id).slideDown("fast");
}, function(){
    $("#dd_" + this.id).slideUp("fast");
});

这是在你的小提琴：http: //jsfiddle.net/NAyWQ/11/

Answer 2

您拥有的 jsfiddle 有点凌乱，而且扩展性不是很好。我建议使用“ul”而不是“div”，因为它更简洁，并且您可以使用 CSS 做更多事情。另外，我会避免使用过多的 ID，因为这意味着您必须始终手动更新它们。

这是我放在一起的一个例子。此方法还支持嵌套下拉菜单（如果您想要的话）。

http://jsfiddle.net/EYv9g/4/

您将在 CSS 中看到“>”。这是一个非常强大的选择器，它允许您将样式应用于作为父级直接子级的元素，但不能应用于更远的元素

例如：

ul.menu > li {background: yellow}

将适用于...

<ul class="menu">
    <li>me
        <ul>
            <li>but NOT me</li>
        </ul>
    <li><a>me</a>
<ul>

Answer 3

尝试这样的事情 - http://jsfiddle.net/NAyWQ/11/。

这是它不使用边界 div的 jquery 。

$("#press, #contact, #about").hover(function(){
    $("#dd_" + this.id).slideDown("fast");
}, function(){
    $("#dd_" + this.id).slideUp("fast");
});