web-dev-qa-db-ja.com

Bootstrap 3 collapse accordion：すべての動作を折りたたみますが、data-parentを維持しながらすべてを展開することはできません

Bootstrap 3を使用して、次のアコーディオン/折りたたみ構造をセットアップしようとしています。

  1. オンロード：グループ内の各アコーディオンパネルは完全に折りたたまれており、文書化/期待どおりに機能します。

  2. ボタンクリック：各アコーディオンパネルが展開され、トグルをクリックしても効果はありません（URLアンカー効果を含む）。

  3. 別のボタンクリック：すべてのパネルがオンロード状態に戻ります。すべてが折りたたまれ、通常どおりクリック可能になりました。

手順2に進みましたが、手順3でもう一度ボタンをクリックしても効果はありません。また、Chrome Dev Toolsで、またはローカルJSHintを介してコードを実行しても、コンソールエラーは報告されません。

ボタンがクリックされるたびに、このサイクルが繰り返されるようにしたいと思います。

ここでコードをセットアップしました http://bootply.com/9814 そしてここで http://jsfiddle.net/A9vCx/

私が間違っていることを知りたいので、提案に感謝します。ありがとうございました！

私のHTML：

<button class="collapse-init">Click to disable accordion behavior</button>
<br><br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

私のJS：

$(function() {

  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('.collapse-init').on('click', function() {
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
      $('.panel-title > a').removeAttr('data-toggle');
      $(this).html('Click to enable accordion behavior');
    }
  });

});
jqueryaccordiontwitter-bootstrap-3collapse
21
cfx

更新された回答

アコーディオンとして設定された折りたたみコントロールの複数のパネル、つまりdata-parent属性セットは、非常に問題が多くバグが多いことがわかります（この質問は プログラムでパネルを開いた後に複数のパネルを開く ）を参照してください）

代わりに、最良のアプローチは次のとおりです。

  1. 各パネルを個別に切り替えることができます
  2. 次に、必要に応じて手動でアコーディオンの動作を強制します。

各パネルが個別にトグルできるようにするには、data-toggle="collapse"要素、data-target属性の.collapseパネルIDセレクター（data-parent親コントロールの属性。詳細については、質問 Modify Twitter Bootstrap collapseプラグインを開いてアコーディオンを開いたままにする 。

おおよそ、各パネルは次のようになります。

<div class="panel panel-default">
   <div class="panel-heading">
         <h4 class="panel-title"
             data-toggle="collapse" 
             data-target="#collapseOne">
             Collapsible Group Item #1
         </h4>
    </div>
    <div id="collapseOne" 
         class="panel-collapse collapse">
        <div class="panel-body"></div>
    </div>
</div>

アコーディオンの動作を手動で強制するために、パネルが表示される直前に発生する折りたたみ表示イベントのハンドラーを作成できます。これを使用して、選択したパネルが表示される前に、他の開いているパネルが閉じられていることを確認します（これを参照してください （複数のパネルを開いた場合の回答 ）。また、パネルがアクティブな場合にのみコードを実行する必要があります。それをすべて行うには、次のコードを追加します。

$('#accordion').on('show.bs.collapse', function () {
    if (active) $('#accordion .in').collapse('hide');
});

次に、showとhideを使用して、各パネルとdata-toggleコントロールを有効または無効にします。

$('#collapse-init').click(function () {
    if (active) {
        active = false;
        $('.panel-collapse').collapse('show');
        $('.panel-title').attr('data-toggle', '');
        $(this).text('Enable accordion behavior');
    } else {
        active = true;
        $('.panel-collapse').collapse('hide');
        $('.panel-title').attr('data-toggle', 'collapse');
        $(this).text('Disable accordion behavior');
    }
});

jsFiddleでの実演デモ

49
KyleMit

何らかの理由で$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});は初めて動作するように見え、折りたたみ可能なものを展開するためにのみ動作します。 （私は、展開された折りたたみ式から始めようとしましたが、崩壊しませんでした。）

これらのパラメーターを使用して崩壊を最初に初期化するときに一度実行されるものになります。

showおよびhideメソッドを使用すると、さらに幸運が得られます。

以下に例を示します。

$(function() {

  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('.collapse-init').on('click', function() {
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse('hide');
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      $('.panel-collapse').collapse('show');
      $('.panel-title > a').attr('data-toggle','');
      $(this).html('Click to enable accordion behavior');
    }
  });

});

http://bootply.com/98201

更新

付与されたKyleMitは、私よりもこれをうまく処理する方法があるようです。彼の答えと理解に感銘を受けました。

何が起こっているのか、またはshowがいくつかの場所でトグルしているように見える理由がわかりません。

しかし、しばらくいじり回った後..最終的に次のソリューションが付属しました。

$(function() {
  var transition = false;
  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('#accordion').on('show.bs.collapse',function(){
    if($active){
        $('#accordion .in').collapse('hide');
    }
  });

  $('#accordion').on('hidden.bs.collapse',function(){
    if(transition){
        transition = false;
        $('.panel-collapse').collapse('show');
    }
  });

  $('.collapse-init').on('click', function() {
    $('.collapse-init').prop('disabled','true');
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse('hide');
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      if($('.panel-collapse.in').length){
        transition = true;
        $('.panel-collapse.in').collapse('hide');       
      }
      else{
        $('.panel-collapse').collapse('show');
      }
      $('.panel-title > a').attr('data-toggle','');
      $(this).html('Click to enable accordion behavior');
    }
    setTimeout(function(){
        $('.collapse-init').prop('disabled','');
    },800);
  });
});

http://bootply.com/98239

4
Trevor

.collapse( 'hide' )のような 'hide'および 'show'関数も使用したい場合にアコーディオンの性質を維持するには、作成する前にtoggle: falseでオブジェクトに設定された親プロパティで折りたたみ可能なパネルを初期化する必要があります「非表示」または「表示」の呼び出し

// initialize collapsible panels
$('#accordion .collapse').collapse({
  toggle: false,
  parent: '#accordion'
});

// show panel one (will collapse others in accordion)
$( '#collapseOne' ).collapse( 'show' );

// show panel two (will collapse others in accordion)
$( '#collapseTwo' ).collapse( 'show' );

// hide panel two (will not collapse/expand others in accordion)
$( '#collapseTwo' ).collapse( 'hide' );
2
mike