3

私はこの小さなスクリプトを持っています:

var $totalHeight;

$(document).ready(function() {
    $totalHeight = $('#sidebar-container').innerHeight();
    $('.sidebar-heading').each(function() {
        $totalHeight = ($totalHeight - $(this).outerHeight());
    });

    $('.sidebar-contents').each(function() { 
        if ($(this).hasClass('active')) {
            $(this).css('height',$totalHeight);
        }
    });

    $('.sidebar-heading').click(function() {
        $('.sidebar-contents').slideUp().removeClass('active').addClass('inactive')/*.css('height','').removeAttr('style')*/;
        $('.sidebar-heading').removeClass('active')/*.next().slideUp()*/;
        $(this).addClass('active').next().addClass('active').removeClass('inactive').css('height',$totalHeight).slideDown();
    });
});

それが何をすべきかは明らかだと確信しています。

私の問題は次のとおりです。最初のクリックで、その兄弟('.sidebar-heading')に必要なものが適用されません。$totalHeight次のクリック、します。私は何を間違っていますか？

このコードが動作しているドラフト HTML があります。上記の部分をコメントアウトして、バグがどこにあるかを確認しましたが、とにかくそれを理解できませんでした.

4

2 に答える 2

3

slideUp() アニメーションの実行には時間がかかり、完了後にすべての高さと表示スタイルがクリーンアップされます。これにより、次の 2 行で行った設定が消去されます。

他のものを行うには、slideUp() が完了するまで待ってみてください。

   $('.sidebar-heading').click(function() {
        var self = this;
        $('.sidebar-contents').slideUp(undefined, function() {
            $('.sidebar-heading').removeClass('active')/*.next().slideUp()*/;
            $(self).addClass('active')
                .next().addClass('active').removeClass('inactive')
                .css('height',$totalHeight).slideDown();
        }).removeClass('active').addClass('inactive')
        /*.css('height','').removeAttr('style')*/;
    });

デバッガーを使用して Chrome で実行し、スタイルが奇妙な方法で変更されていることに気付いたので、これを理解しました。2 番目の見出しを最初にクリックすると、コードがクリアしていても、1 番目の見出しに設定された高さがそのままになります。つまり、何かが間違って設定されていた可能性があります。そこで、誰かがセットアップしたjsFiddleで上記のコードを試しました。ほら、見よ...

于 2013-01-18T18:22:28.933 に答える
2

@LeeMeadorの回答で言及されている競合を回避するために、fx関数に高さを自動的に設定させることもできます。

slideDown（）はcss値を受け入れないため、代わりにanimate（）関数を直接使用できます。

$('.sidebar-heading').click(function () {
    $('.sidebar-heading').removeClass('active');
    $('.sidebar-contents').removeClass('active').addClass('inactive').stop().animate({ height: '0px' });
    $(this).addClass('active').next().addClass('active').removeClass('inactive').stop().animate({ height: $totalHeight + 'px' });
});

さらに、前のアニメーションが終了していないときに見出しをもう一度クリックした場合の奇妙な動作を防ぐために、アニメーションを実行する前にstop（）を使用してください。

変更されたjsfiddle：http: //jsfiddle.net/z62tr/4/

于 2013-01-18T20:09:51.867 に答える