使用相同的类切换div,但是不是一次全部？

Question

我有以下HTML,因为我正在使用Wordpress,我无法更改每个div的类.

<div class="show_hide">content1</div>
<div class="extended">extension of content 1</div>
<div class="show_hide">content2</div>
<div class="extended">extension of content 2</div>

我的jQuery脚本如下:

 <script type="text/javascript">

    $(document).ready(function(){


        $(".sliding").hide(0);
        $(".show_hide").show(0);

    $('.show_hide').click(function(){
    $(".sliding").slideToggle(0);
    });

});

</script>

现在,当点击show_hide div时,两个div都带有"extended"类显示.我想只显示div点击的扩展名.谁能帮我这个？

Answer 1

如果.extended元素是元素的紧随其后的兄弟.show_hide元素,则可以使用next:

$('.show_hide').click(function(){
    $(this).next().slideToggle(0);
});

如果中间还有其他元素,则可以使用nextAll,然后将选择减少到第一个匹配(带eq):

$('.show_hide').click(function(){
    $(this).nextAll('.extended').eq(0).slideToggle(0);
});