4

私は次の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がクリックした拡張子のみを表示したいと思います。誰かがこれを手伝ってくれますか？

4

2 に答える 2

7

.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);
});
于 2012-06-06T07:32:15.893 に答える
3

コールバック関数では、変数thisにはイベントをトリガーした DOM ノードへの参照が含まれます。

$(this).next().slideToggle(0);
于 2012-06-06T07:32:52.390 に答える