Question

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

我只希望下载我点击的链接。

以下是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，我如何只获得我点击显示的链接？

Answer 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();
});

这是really simple demo。

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

li.nav {
    display: inline-block;
}

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

li.nav:hover ul {
    position: absolute;
    display: block;
}

我只想要显示同一类中的一个下拉列表，但所有内容都显示出来

1 个答案: