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 单击时它只显示一个<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>