单击链接时显示子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例子

Answer 2

尝试这个

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

DEMO

Answer 3

你可以这样做：

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

演示

Answer 4

$(function () {
    $('div.track a.notes-link').click(function (e) {
        e.preventDefault();
        $(this).next().show(); //$(this).next().toggle();--> to show hide
    });
});

。下一个（）

.toggle（）

Answer 5

将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>

Javascript代码：

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

演示： http ： //jsfiddle.net/Zz65U/