web-dev-qa-db-ja.com

Bootstrapアコーディオンボタントグル「data-parent」が機能しない

アコーディオンマークアップなしで、データ属性と折りたたみ可能なボタンを使用して、Bootstrap 3を使用してアコーディオンを作成しようとしています。私にはもっときれいに見えます。

ただし、data-parent属性を機能させることはできません。質問を開くときは、他の人はすべて閉じてください。私はドキュメントを読んでいます（ http://getbootstrap.com/javascript/#collapse-usage ）、それでも動作させることはできません。

私は次のコードを使用しています：

<div class="accordion" id="myAccordion">
    <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">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <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">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <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">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
</div>

JSFiddleは次のとおりです。 http://jsfiddle.net/twinsen/AEew4/

誰かが私に間違いを犯しているところを指してくれたら、とてもうれしいです：\

html5twitter-bootstrapaccordiontwitter-bootstrap-3
56
Ziik

ブートストラップ4

（トリガー要素の代わりに）折りたたみ要素でdata-parent=""属性を使用します

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <h5>
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
          Collapsible #1 trigger
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        Collapsible #1 element
      </div>
    </div>
  </div>
  ... (more cards/collapsibles inside #accordion parent)
</div>

ブートストラップ3

GitHubでこの問題を参照してください： https://github.com/twbs/bootstrap/issues/10966

.panel属性を使用する場合、アコーディオンをdata-parentクラスに依存させる「バグ」があります。この問題を回避するには、「アコーディオン」グループを「パネル」divにラップします。

http://bootply.com/88288

<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である必要はありません。しかしながら...

  • .panelは、data-parent=として使用される要素の直接の子である必要があります
  • 各アコーディオンセクション（data-toggle=）は.panelの直接の子でなければなりません（ http://www.bootply.com/AbiRW7BdD6# ）
134
Zim

.panelに依存するだけでなく、DOM構造にも依存することに注意してください。

要素が次のように構成されていることを確認してください。

    <div id="parent-id">
        <div class="panel">
            <a data-toggle="collapse" data-target="#opt1" data-parent="#parent-id">Control</a>
                <div id="opt1" class="collapse">
...

基本的に@Blazemongerが言ったことですが、ターゲット要素の階層も重要だと思います。すべての可能性を試してみたわけではありませんが、基本的にこの階層に従うとうまくいくはずです。

参考までに、コントロールdivとコンテンツdivの間にさらにレイヤーがありましたが、機能しませんでした。

16
jtlai

これを試して。依存関係のないシンプルなソリューション。

$('[data-toggle="collapse"]').click(function() {
  $('.collapse.in').collapse('hide')
});
10
Melih

Blazemongerが言ったように、＃parent、.panel、および.collapseは直接の子孫でなければなりません。ただし、htmlを変更できない場合は、次のコードでbootstrapイベントおよびメソッドを使用して回避策を実行できます。

$('#your-parent .collapse').on('show.bs.collapse', function (e) {
    var actives = $('#your-parent').find('.in, .collapsing');
    actives.each( function (index, element) {
        $(element).collapse('hide');
    })
})
8
Krzysztof Grzybek

BootStrap V3のこの問題を修正するために開発した（できれば）ユニバーサルパッチを次に示します。スクリプトのプラグイン以外の特別な要件はありません。

$(':not(.panel) > [data-toggle="collapse"][data-parent]').click(function() {
    var parent = $(this).data('parent');
    var items = $('[data-toggle="collapse"][data-parent="' + parent + '"]').not(this);
    items.each(function() {
        var target = $(this).data('target') || '#' + $(this).prop('href').split('#')[1];
        $(target).filter('.in').collapse('hide');
    });
});

編集：以下は、私のニーズを満たしている簡略化された答えであり、デリゲートされたクリックハンドラを使用しています。

$(document.body).on('click', ':not(.panel) > [data-toggle="collapse"][data-parent]', function() {
    var parent = $(this).data('parent');
    var target = $(this).data('target') || $(this).prop('hash');
    $(parent).find('.collapse.in').not(target).collapse('hide');
});
2
craigrs84

このKrzysztof回答の変更が見つかった場合、私の問題を解決しました

$('#' + parentId + ' .collapse').on('show.bs.collapse', function (e) {            
    var all = $('#' + parentId).find('.collapse');
    var actives = $('#' + parentId).find('.in, .collapsing');
    all.each(function (index, element) {
      $(element).collapse('hide');
    })
    actives.each(function (index, element) {                
      $(element).collapse('show');                
    })
})

ネストされたパネルがある場合は、別のクラス名を追加してそれらを区別し、上記のJavaScriptのセレクターに追加することにより、どのパネルを指定する必要があるかもしれません

2
kernowcode

アコーディオンを切り替えるときに同じ問題が発生しました。しかし、スクリプトブロックをヘッダーブロックに配置しようとすると、私の場合は動作します!!

<head>   
...   
<link rel="stylesheet" href="../assets/css/bootstrap.css" />       
<script src="../assets/js/jquery-1.9.1.min.js" ></script>   
<script src="../assets/js/bootstrap.js" ></script> 
</head>
0
Enix