0

我有一个下拉导航，我试图在点击时显示下拉菜单。到目前为止，当我单击任何顶部导航链接时，都会出现所有下拉菜单。

我只想显示我单击的链接的下拉菜单。

这是 HTML 的一部分：

<div class="group group-primary">
<div class="wrapper contain">
<ul class="nav push-left">

<li class="dropdown-control">
<a href="/top link">Top Link 1</a>
<div class="dropdown">
<div class="primary">
<ul>
<li>
<a href="/link">
<span>link one</span>
</a>    </li>
<li>
<a href="/link2">
<span>link2</span>
</a>    </li>
</ul>
</div>
</div>
</li>


<li class="dropdown-control">
<a href="/top link">Top Link 2</a>
<div class="dropdown">
<div class="primary">
<ul>
<li>
<a href="/link">
<span>link one</span>
</a>    </li>
<li>
<a href="/link2">
 <span>link2</span>
 </a>   </li>
 </ul>
 </div>
 </div>
 </li>

 </ul>
 </div>
 </div>

这是我必须选择下拉列表并使其显示的代码。

<script>
$("li.dropdown-control > a").click( function () {
     this.dropdown = $(".dropdown")
       $(this.dropdown).toggleClass("dropped");  
 });
</script>

由于有许多“下拉”类 div，我如何只获得我点击显示的链接的一个？

4

1 回答 1

1

您需要确保元素之间存在关系，以便您可以判断它们是否匹配。例如：

<ul>
    <li class="nav">Main Item
        <ul>
            <li>Drop Down Item</li>
            <li>Drop Down Item</li>
            <li>Drop Down Item</li>
        </ul>
    </li>
    <li class="nav">Main Item
        <ul>
            <li>Drop Down Item</li>
            <li>Drop Down Item</li>
            <li>Drop Down Item</li>
        </ul>
    </li>
</ul>

然后你可以使用关系来显示相关信息：

$(".nav").click( function () {
    $("ul", this).toggle();
});

这是一个非常简单的演示。

作为脚注，您可以仅使用 CSS 实现类似的效果：

li.nav {
    display: inline-block;
}

li.nav ul {
    position: absolute;
    display: none;
}

li.nav:hover ul {
    position: absolute;
    display: block;
}
于 2013-01-21T17:10:53.607 回答