Javascript 单击函数以显示下一个元素

我想让我的菜单充满活力

我有以下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方法来实现它，但我找不到任何方法

有什么想法吗？
你可以用哪个

获取匹配元素集中每个元素紧跟其后的同级

如果希望能够切换（显示/隐藏）dt

s，可以使用jQuery的-功能：

$(document).ready(function(){

    $('dt').on('click', function(){
        $(this).next('dd').toggle();
    });

});

对象引用单击的元素。将选择与选择器匹配的下一个元素，在本例中为下一个

dd

为了确保将事件侦听器绑定到现有元素，可能需要使用-listener来包装代码

---

如果你在谷歌中搜索使用jquery显示或隐藏一个元素，你会得到很多例子，我知道如何使用jquery（.even）.show（）/hide（）；问题是使dinamic适用于所有人，并在您使用的元素发生变化时进行更改click@Mivaweb，刚刚添加了一个演示，现在要添加描述，很好，谢谢，但是它更有用的是经验代码，但是谢谢！谢谢！我将去学习如何使用它到其他网站。非常有用！

$(document).ready(function(){

    $('dt').on('click', function(){
        $(this).next('dd').toggle();
    });

});