javascript - 切换具有相同类但单独的 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 时，两个带有“extended”类的 div 都会显示。我只想显示 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);
});