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があるので、クリックして表示したリンクの1つだけを取得するにはどうすればよいですか。

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 に答える