Нажмите кнопку, чтобы отобразить следующий элемент

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 или яваскрипт методу, чтобы сделать это, но я не могу найти.

Любая идея?

Answer 1

Если вы хотите, чтобы иметь возможность переключения (показать/скрыть) dt s вы можете использовать .toggle -функции JQuery:

$(document).ready(function(){ 

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

}); 

$(this) - объект ссылается на элемент clicked. .next() выберет следующий элемент, соответствующий селектору, в этом случае следующий dd.

Чтобы быть уверенным, вы связываете ваше событие-слушателя к существующему элементу, вам, возможно, придется обернуть свой код с .ready() -listener

Demo

Answer 2

Вы можете использовать next(), который

Получить сразу после родственный каждого элемента в наборе соответствующих элементов.

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

DEMO