46

アコーディオンと折りたたみプラグインを使用して Twitter ブートストラップを使用して Outlook バーを模倣しようとしていますが、これまでのところ折りたたみとアコーディオンが機能していますが、現在、すべてのセクションを折りたたむことができます。

常に1つだけが表示されるように制限したいと思います。

ここに私が取り組んでいるものがあります: http://jsfiddle.net/trajano/SMT9D/そして、それは次の行に沿ったどこかにあると思います

$('#accordions').on('hide', function (event) {
  console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop");
})
4

11 に答える 11

75

これを行う簡単な方法は次のとおりです。

ブートストラップ 4

$('.accordion .btn-link').on('click', function(e) { 
  if (!$(this).hasClass('collapsed')) { 
    e.stopPropagation(); 
  } 
});

コメントの @mr_joncollette から

ブートストラップ 3

Bootstrap 3 のJsFiddle 。

ブートストラップ 3 のコード:

$('.panel-heading a').on('click',function(e){
    if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){
        e.stopPropagation();
    }
    // You can also add preventDefault to remove the anchor behavior that makes
    // the page jump
    // e.preventDefault();
});

このコードは、クリックされた要素が(クラス "in" によって) 現在表示されている要素であるかどうかを確認し、"in" クラスがある場合は、非表示プロセスを停止します。

非推奨のブートストラップ 2

Bootstrap 2 のJsFiddle 。

ブートストラップ 2 のコード:

$('.accordion-toggle').on('click',function(e){
    if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){
        e.stopPropagation();
    }
    // You can also add preventDefault to remove the anchor behavior that makes
    // the page jump
    // e.preventDefault();
});

注: チェック後に発生するイベントがブロックされるため、アコーディオンにさらにクリック イベントを追加する場合は注意してください。e.stopPropagation()

于 2013-03-31T03:00:31.553 に答える
1

提供されているソリューションでは、1 つのタブを開いたままにするかどうかに関係なく、同じページに複数のアコーディオンを配置できません。

これが私の解決策です：

$("[data-toggle=buttons][data-oneopen=true] [data-toggle=collapse]").on("click", function (e) {
  var me = $(this);
  var target = $(me.attr("data-target") || me.attr("href"));
  if (target.hasClass("show")) {
    e.stopPropagation();
  }
});

最初に、data-oneopenアコーディオン ボタンにフラグを立ててこの動作を有効にする属性を選択しましたが、クラスまたは他のセレクターに置き換えることができます。

data-target次に、href属性をチェックして、関連するタブを見つけます。

最後にstopPropagation、アイテムにクラスがある場合は、クラスが Bootstrap 3 のソリューションを持つようshowに変更します。in

于 2020-08-17T16:37:18.757 に答える
0

ブートストラップ 5

data-bs-parentそれぞれの属性を省略して.accordion-collapse、別のアイテムを開いたときにアコーディオン アイテムを開いたままにします。

于 2021-09-14T14:34:45.190 に答える