web-dev-qa-db-ja.com

Twitter Bootstrap Accordionは1つのグループを開いたままにしますか？

Twitter bootstrapアコーディオンと折りたたみプラグインを使用して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");
})
twitter-bootstrapaccordiontwitter-bootstrap-3
43
Archimedes Trajano

簡単な方法は次のとおりです。

新しいBootstrap 3

JsFiddle for Bootstrap 3。

Bootstrap= 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();
});
_

コードは、クリックされた要素が現在表示されている要素かどうかをチェックします（by the class "in"）そして、 "in"クラスがある場合、非表示プロセスを停止します。

非推奨Bootstrap 2

JsFiddle for Bootstrap 2。

Bootstrap 2：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()はイベントをブロックするため、アコーディオンにさらにクリックイベントを添付する場合は注意してくださいこれはチェック後に発生します。

72
Hugo Dozois

@Hugo Dozoisの答えを正確にしたい

http://jsfiddle.net/SMT9D/61/

ページにスクロールがある場合に_#_ HTMLアンカーのデフォルトの動作を防ぐには、e.preventDefault();を追加する必要があります

_$('.panel-heading a').on('click',function(e){
    if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){
        e.preventDefault();
        e.stopPropagation();
    }
});
_
9
Aelios

または、次のように簡単なCSSトリックを使用できます。

/*
prevent the active panel from collapsing
 */
.panel-group [aria-expanded=true]{
  /*
  http://caniuse.com/#feat=pointer-events
  Works for MOST modern browsers. (- Opera Mobile)
  */
  pointer-events: none;
}

非アクティブなパネルリンクに適切なタグが必要です

 aria-expanded="false"
6
Heri Hehe Setiawan

2018年に更新

Bootstrap v3またはv4の両方で少なくとも開いたままにする方法は次のとおりです。つまり、オープンアコーディオンはonlyopenをもう1つ切り替えて閉じます。

ブートストラップ4

https://www.codeply.com/go/bbCcnl0jBB

// the current open accordion will not be able to close itself
$('[data-toggle="collapse"]').on('click',function(e){
    if ( $(this).parents('.accordion').find('.collapse.show') ){
        var idx = $(this).index('[data-toggle="collapse"]');
        if (idx == $('.collapse.show').index('.collapse')) {
            e.stopPropagation();
        }
    }
});

また、 この回答を参照 は、他のすべてが閉じられたときに開く「デフォルト」のアコーディオンを指定する方法を示しています。

ブートストラップ3

$('[data-toggle="collapse"]').on('click',function(e){
    if($(this).parents('.panel').find('.collapse').hasClass('in')){
        var idx = $(this).index('[data-toggle="collapse"]');
        var idxShown = $('.collapse.in').index('.accordion-body');
        if (idx==idxShown) {
            e.stopPropagation();
        }
    }
});

https://www.codeply.com/go/yLw944BrgA

<div class="accordion" id="myAccordion">
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
        <div id="collapsible-1" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
        <div id="collapsible-2" class="collapse">
            ..
        </div>
    </div>
    <div class="panel">
        <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion">Question 3?</button>
        <div id="collapsible-3" class="collapse">
           ...
        </div>
    </div>
</div>

（注：panelクラスはBootstrap 3 to アコーディオン動作を機能させる ）

5
Zim

他のすべてのJS回答では inadvisablestopPropagation()を使用しているため、ネイティブBootstrapイベント（Bootstrap 4）。

JsFiddle

$('#accordionExample').on('show.bs.collapse', function () {
    $(this).data('isShowing', true);
});

$('#accordionExample').on('hide.bs.collapse', function (event) {
    if (!$(this).data('isShowing')) {
        event.preventDefault();
    }

    $(this).data('isShowing', false);
});

折りたたまれた要素をクリックすると、show.bs.collapseの後にhide.bs.collapseが続くという事実を利用します。一方、開いている要素をクリックすると、hide.bs.collapseになります。

2
chris

私は投稿された答えに合わないシナリオを持っています：同じページ上の複数のアコーディオンとアコーディオンではない他の折りたたみ可能なコンポーネント（data-parent属性なし）。

$("[data-toggle=collapse][data-parent]").click(function (e) {
    var button = $(this);
    var parent = $(button.attr("data-parent"));
    var panel = parent.find(button.attr("href") || button.attr("data-target"));
    if (panel.hasClass("in")) {
        e.preventDefault();
        e.stopPropagation()
    }
});

data-parent属性をチェックするため、このコードはアコーディオンでのみトリガーされます。また、card（またはbootstrap 3の場合はpanel）構造も想定していません。bootstrap apiと同じ属性を使用します。

役に立てば幸いです。

0
kpull1

ブートストラップ4.0

$('.card').click(function(e) {
  if (
    $(this)
      .find('.collapse')
      .hasClass('show')
  ) {
    e.stopPropagation();
  }
});

このコードブロックは、クリックされたカードが折りたたまれているかどうかを確認します（クラスcollapseでdivを調べます）。カードが現在shownの場合、停止します イベントの伝播 。

0
Johannes Filter