Question

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

它完成了这项工作，而且它几乎是我目前所需要的所有功能......但我觉得它可以稍微优化一下。也就是说，有没有一种方法可以在没有边界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

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

这里是jquery ，它不使用边界div。

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

Answer 3

你拥有的jsfiddle有点凌乱，不是很容易扩展。我建议使用“ul”而不是“div”，因为它更干净，你可以用CSS做更多的事情。此外，我会避免使用太多ID，因为这意味着您必须始终手动更新它们。

这是我放在一起的一个例子。此方法还支持嵌套下拉列表（如果需要）。

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

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

例如：

ul.menu > li {background: yellow}

适用于......

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

Jquery下降工作正常......但可能会更好

3 个答案: