javascript - 单击链接时显示子 div

Question

我有一系列带有链接和隐藏 div 的 div。单击链接时，我需要显示父级中隐藏的 div。例如:

<div class="track" id="track1">
<a href="#" class="notes-link">Song Notes</a>
<div class="song-notes"></div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>

<div class="track" id="track2">
<a href="#" class="notes-link">Song Notes</a>
<div class="song-notes"></div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>

到目前为止，我尝试的选项打开了所有 .song-notes div，但我想指定仅应打开包含链接的父 div 的子 div。

Answer 1

我喜欢在这里使用.toggle()。

$('a.notes-link').click(function (){
    $(this).next('.song-notes').toggle();
});

<强> jsFiddle example