toggleclass - 如何在单击时切换多个 div

Question

我之前曾问过类似的问题，其答案部分解决了我的问题。

但是现在我需要扩展代码。

当只有两个 div 时，此代码会切换 div 的可见性，但是当添加第三个 div 时，当我想单独显示每组 div 时，它会同时显示第二组和第三组 div'

这个 fiddle 显示了当前发生的情况； http://jsfiddle.net/richarde/vCjPL/

jQuery

$('.media-thumb a').click(function(){
    $('div[class^="media"]').toggleClass('is-hidden');
    return false;
});

标记(点击事件绑定(bind)到这些div的 anchor )

<div class="media-thumb ">
    <img src="thumb.jpg" />
    <p><a href="#">Link 1</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 2</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 3</a></p>
</div>

现在我需要扩展上述内容，但我不确定我当前的方法是最好的。我该怎么做才能使这项工作适合我的情况？

提前致谢。

Answer 1

如果我理解正确，单击第一个链接，应该使第二个 div 出现，单击第二个链接，应该使第三个 div 出现，依此类推。

如果是这样，请尝试以下操作:

$('.media-thumb a').click(function(){
    var parentDiv=$(this).parents('div.media-thumb');
    $(parentDiv).toggleClass('is-hidden');
    if($(parentDiv).next('div.media-thumb').length){
       //there is next div.media-thumb; make it visible
       $(parentDiv).next('div.media-thumb').toggleClass('is-hidden'); 
    }else{
        //back to first div
        $('div.media-thumb:first').toggleClass('is-hidden');
    }
    return false;
});​

这是jsfiddle

现在，根据您是否希望 div 占用空间，将您的 css 类设置为 .is-hidden{visibility: hide} 或 .is-hidden{display: none }