1

私が取り組んできた単純なアコーディオン型のメカニズムがあります。私は、slideUp と slideDown のコールバック機能に精通しており、これを使用して、アニメーションの完了後にクラスを変更しました。

2 つのボタンがあります。1 つはアコーディオン内のすべての div を展開し、もう 1 つはそれらを折りたたみます。これは問題なく動作し、これらのボタンのみを使用してアコーディオンを制御すると、クラスは正しいタイミングで変更されます。

ただし、(h3 をクリックして) アコーディオンの 1 つを開き、ボタンをクリックしてすべての div を折りたたむと、h3 のクラスがすぐに変更されます (したがって、その外観が変わります)。

どこかで矛盾が生じているはずです。私の関数は特に私たちが書いたものではないと確信していますが、何か助けていただければ幸いです。

ありがとう

これはjQueryです：

$('.accordion h3').addClass('closed').next('div').hide();

        $('.accordion h3').click( function() {
            if ($(this).hasClass('closed')){
                $(this).removeClass('closed');
                $(this).addClass('open');
        $(this).next('div').stop(true,true).slideDown();
            }   else if ($(this).hasClass('open')){
                    $(this).next('div').stop(true,true).slideUp('normal', function() {
                        $(this).prev('h3').removeClass('open');
                        $(this).prev('h3').addClass('closed');
                    });
                }
        });

        $('#expand-all').click( function() {
            if ($('.accordion h3').hasClass('closed')){
                $('.accordion h3').removeClass('closed');
                $('.accordion h3').addClass('open');
        $('.accordion h3').next('div').stop(true,true).slideDown();
            }
            return false;
        });

        $('#collapse-all').click( function() {
            if ($('.accordion h3').hasClass('open')){
        $('.accordion h3').next('div').stop(true,true).slideUp('normal', function(){
                    $('.accordion h3').removeClass('open');
                    $('.accordion h3').addClass('closed');
                });
            }
            return false;
        });

次の html は単純化されていますが、基本的な構造は同じです。

<a id="expand-all" href="#">Expand all</a>
<a id="collapse-all" href="#">Collapse all</a>

<div class="accordion">
    <h3>Clickable to trigger dropdown</h3>
    <div>This is the hidden content that shows when the h3 is clicked</div>
    <h3>Clickable to trigger dropdown</h3>
    <div>This is the hidden content that shows when the h3 is clicked</div>
</div>
4

1 に答える 1

1

これは、アコーディオンの 1 つが既に閉じられているためです。したがって、slideUp が完了し、次の呼び出しが行われます。

$('.accordion h3').removeClass('open');
$('.accordion h3').addClass('closed');

$('.accordion h3') を実行するのではなく、相対的なものを変更する必要があるため、次のように試してください。

$(this).prev('h3').removeClass('open');
$(this).prev('h3').addClass('closed');

折りたたみでは、すべての slideUp コールバック。

于 2011-01-07T18:07:27.517 に答える