2

3つのアイテムを表示するこの簡単なコードがあります

ヘッダー ( $(".fileHeader")) を押すと、次の要素 (非表示の div) である次の要素を開く必要があります ( $(".LST_Documents"))

スケッチ:

ここに画像の説明を入力

JSBIN : 動作します。

最も重要な ：

a -i を押すと、他の$(".fileHeader")すべてを閉じる必要があり、( それが私が使用した理由です) 関連するものを開きます。 $(".LST_Documents")promise$(".LST_Documents")

問題は（写真を見て）最初のボタンをもう一度押すと$(".fileHeader")です。何が起こっているかというと、閉じてから再び開くということです。CLOSED のままにし たい。

PS

クラス（.rowOpenまたはそのようなもの）で解決できましたが、JS/JQのみで解決したいと考えています。

期待どおりに動作するようにコードを拡張するにはどうすればよいですか?

4

2 に答える 2

4

上にスライドする前に、ヘッダーのコンテンツの可視性状態を保持するだけです。コンテンツが表示されていない場合にのみ、コンテンツを下にスライドさせます。

これがフィドルです。

$(".fileHeader").on('click', function () {
    var content$ =  $(this).next(),
        isContentVisible = content$.is(':visible');

    $(".LST_Documents:visible").slideUp().promise().done(function () {
        if ( ! isContentVisible ) {
            content$.slideDown();
        }
    });

});
于 2013-06-11T10:43:45.607 に答える
1

単純な条件についてはどうですか:

$(".fileheader").on('click', function() {    
    var next = $(this).next();
    if(next.is(':visible'))
    {
        next.slideUp();
    }
    else
    {
        $(".LST_Documents:visible").slideUp().promise().done(function() {
              next.slideDown();
        });
    }
});
于 2013-06-11T10:44:53.950 に答える