Javascript 单击链接时显示子div

我有一系列带有链接和隐藏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。

试试这个

$(document).ready(function(){
    $('.notes-link').click(function(ev){
       ev.preventDefault();
       $(this).closest('.track').find('.song-notes').show();
    });
});

您可以执行以下操作：

$(function () {
    $('.notes-link').click(function (e) {
        e.preventDefault();
        $(this).next().show();
    });
});

我喜欢在这里使用

.toggle（）

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

---

将id添加到隐藏的div中

<div class="track" id="track1">
<a href="javascript:showNotes(1);" class="notes-link">Song Notes</a>
<div class="song-notes" style="display:none" id="song1">1</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>

<div class="track" id="track2">
<a href="javascript:showNotes(2);" class="notes-link">Song Notes</a>
<div class="song-notes" style="display:none" id="song2">2</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>

演示：

---

请将您尝试的代码包括在内，这非常值得您花时间阅读。这将花费你大约一个小时的时间，用这些简单的东西可以节省你大量的时间。谢谢，@T.J.Crowder-我会的！这很有效。其他答案都不错，但这似乎是最直接的解决方案。谢谢

<div class="track" id="track1">
<a href="javascript:showNotes(1);" class="notes-link">Song Notes</a>
<div class="song-notes" style="display:none" id="song1">1</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>

<div class="track" id="track2">
<a href="javascript:showNotes(2);" class="notes-link">Song Notes</a>
<div class="song-notes" style="display:none" id="song2">2</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>

    function showNotes(id){
        $('#song'+id).toggle();
    }