javascript - 单击功能以显示下一个元素

Question

我想让我的菜单变得动态。

我有这个 HTML 输出:

<dl>
    <dt class="odd">one</dt>
    <dd class="odd"> ...</dd>

    <dt class="even">two</dt>
    <dd class="even"> ...</dd>

    <dt class="odd">three</dt>
    <dd class="odd">... </dd>

    <dt class="even">four</dt>
    <dd class="even">... </dd>

    <dt class="odd">five</dt>
    <dd class="odd">... </dd>

    <dt class="even">six</dt>
    <dd class="even">...</dd>
</dl>

我已将 dd 设置为 display: none 因为它们是过滤器。 dt 是标题。

我试图做到这一点，以便我单击 dt 它必须将下一个 dd 元素更改为 display: block;

我正在寻找一些 jQuery 或 javascript 方法来做到这一点，但我找不到任何方法。

有什么想法吗？

Answer 1

您可以使用next()这将

Get the immediately following sibling of each element in the set of matched elements.

$('dt').click(function(){
  $(this).next('dd').show();
  });

DEMO