Question

我有以下div：

<div class="album">
    <div class="album-cover">
        <img src="cover.jpg">
    </div>

    <div class="album-tracks">
        <ul>
            <li class="song">01 - Song</li>
            <li class="song">02 - Song</li>
            <li class="song">03 - Song</li>
            <!-- and so on -->
        </ul>
    </div>
</div>

以上代码将添加到艺术家的每张专辑中。我现在的jQuery是这样的：

$(document).ready(function() {
    $('.album-tracks').hide();

    $('.album-cover').click(function() {
        if($('.album-tracks').is(':hidden')) {
            $('.album-tracks').slideDown('easeInExpo', 0);
        } else {
            $('.album-tracks').slideUp('easeOutExpo');
        }
    })
});

因此，当用户点击相册图片时，曲目会向下滑动。这也是我的问题的一部分。当用户点击封面时，所有曲目列表都向下滑动，而不是从该专辑中滑落。检查http://jsfiddle.net/vW5s7/1/以查看正在运行的脚本。

那么有没有办法只显示点击专辑的曲目而不是所有专辑？

提前致谢

Answer 1

检查siblings选择器

$(document).ready(function () {
    $('.album-tracks').hide();

    $('.album-cover').click(function () {
        var $this = $(this);
        if ($this.siblings('.album-tracks').is(':hidden')) {
            $this.siblings('.album-tracks').slideDown('easeInExpo', 0);
        } else {
            $this.siblings('.album-tracks').slideUp('easeOutExpo');
        }
    })
});

工作FIDDLE here

Answer 2

您应该使用this：http://learn.jquery.com/javascript-101/this-keyword/

更新的代码：

$(document).ready(function () {
    $('.album-tracks').hide();

    $('.album-cover').click(function () {
        var tracks = $(this).closest('.album').find('.album-tracks');
        if (tracks.is(':hidden')) {
            tracks.slideDown('easeInExpo', 0);
        } else {
            tracks.slideUp('easeOutExpo');
        }
    })
});

Demo

Jquery点击动作为1 div但多次激活

2 个答案: