javascript - next を使用して、定義リスト内で複数の子を選択して表示する

Question

<dd>をクリックしたときに 3 を表示したいのですが、その特定の子ではない が<dt>非表示になります<dd><dt>

<dl>
    <dt>Home
        <dd><a href="#">Link1</a></dd>
        <dd><a href="#">Link1</a></dd>
        <dd><a href="#">Link1</a></dd>
    </dt>
    <dt>Products
        <dd><a href="#">Link2</a></dd>
        <dd><a href="#">Link2</a></dd>
        <dd><a href="#">Link2</a></dd>
    </dt>
    <dt>Downloads
        <dd><a href="#">Link3</a></dd>
        <dd><a href="#">Link3</a></dd>
        <dd><a href="#">Link3</a></dd>
    </dt>
    <dt>Services
        <dd><a href="#">Link4</a></dd>
        <dd><a href="##">Link4</a></dd>
        <dd><a href="#">Link4</a></dd>
    </dt>
    <dt>About Us
        <dd><a href="#">Link5</a></dd>
        <dd><a href="#">Link5</a></dd>
        <dd><a href="#">Link5</a></dd>
    </dt>
</dl>

dd しかし、クリックしたときに表示されるのは1つだけです。ここでクリックした子の子供ではないものを非表示にしながら<dt>、残りを表示する方法は次のとおりです。<dd><dd><dt>

$("dt").on({
   click:function  () {
     $(this).next("dd").slideDown(500).siblings("dd").hide();
   },
})

Answer 1

あなたのアプローチには誤りがあります。

1. マークアップが間違っています。<dd>内部をネストすることは想定されていません<dt>。
2. これを行うと、ブラウザはネストさ<dd>れた を の兄弟としてスタックし<dt>ます。

提案：

<ul>
    <li>Home
        <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link1</a></li>
        </li>
    </ul>
</ul>