0

同じ構造を持つ 3 つの拡張 div があります。何かのようなもの：

<div class="expand">
    <h3 class="more">Click to expand</h3>
    <div class="wrapper">Iasdfgh qwerty zxcvbn</div>
</div>

Jクエリ

$(document).ready(function(){
    var toggleButton = $('.expand h3.more');
    var expandWrap = $(toggleButton).next('.wrapper');
    $(toggleButton).click(function(){
        if ($(expandWrap).is('.closed')) {
            $(toggleButton).removeClass('closed');
            $(expandWrap)
                .removeClass('closed')
                .slideDown('slow');

        } else {
            $(expandWrap)
                $(expandWrap).slideUp('slow', function(){
                    $(this).addClass('closed');
                    $(toggleButton).addClass('closed');
                });
        }
    });
});

現在、「クリックして展開」をクリックするとh3、すべてが.wrapper上下にスライドします。.wrapper一度に1 つだけトグルするように、次の即時のみをターゲットにするにはどうすればよいですか?

4

3 に答える 3

0

多分関数next（）を使用してください：

http://api.jquery.com/next/

于 2012-07-18T07:07:04.857 に答える
0

これを試して

$(document).ready(function(){
    var toggleButton = $('.expand h3.more');

    $(toggleButton).click(function(){
        var thisToggleButton = this;
        var expandWrap = $(thisToggleButton ).next('.wrapper');
        if (expandWrap.is('.closed')) {
            $(thisToggleButton ).removeClass('closed');
            expandWrap
                .removeClass('closed')
                .slideDown('slow');

        } else {
           expandWrap.slideUp('slow', function(){
                    $(this).addClass('closed');
                    $(thisToggleButton).addClass('closed');
                });
        }
    });
});
于 2012-07-18T07:07:13.840 に答える
0

これをかなり単純化できます。

$(function(){
    $('.expand h3.more').on('click',function(){
        $(this).next('div.wrapper').toggle('slow');
    });
});

jsFiddle: http://jsfiddle.net/QzHYX/

編集: jQuery の古いバージョンを使用している場合は、これを機能させるために変更onする必要があることに注意してくださいlive。

于 2012-07-18T07:09:42.560 に答える