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()

获取匹配元素集中每个元素的紧随其后的兄弟。

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

DEMO

Answer 2

如果您希望能够切换（显示/隐藏）dt，您可以使用.toggle - jQuery的功能：

$(document).ready(function(){

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

});

$(this) - 对象引用单击的元素。 .next()将选择与选择器匹配的下一个元素，在本例中为下一个dd。

为了确保您将事件监听器绑定到现有元素，您可能必须使用.ready() - 监听器

包装您的代码

<强> Demo

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

2 个答案: