點擊功能顯示下一個元素

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

如果您希望能夠切換（顯示/隱藏）dt是你可以使用.toggle - 函數的jQuery：

$(document).ready(function(){ 

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

}); 

的$(this) - 對象引用被單擊的元素。 .next()將選擇與選擇器匹配的下一個元素，在這種情況下是下一個dd。

爲了確保你的事件監聽器結合到現有的元素，你可能要包裝你的代碼與.ready()章24 -listener

Demo

Answer 2

您可以使用next()這將

獲取緊隨其後的每個元素的兄弟在匹配的元素。

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

DEMO