64

アコーディオンマークアップなしで、data属性で折りたたみ可能なボタンを使用して、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/

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

4

7 に答える 7

154

ブートストラップ 4

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

<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これを回避するには、各アコーディオン グループを 'panel' 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=
  • 各アコーディオン セクション ( ) は( http://www.bootply.com/AbiRW7BdD6# )data-toggle=の直接の子でなければなりません.panel
于 2013-10-17T12:02:21.203 に答える
16

.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 の間にさらにレイヤーがありましたが、うまくいきませんでした。

于 2013-11-30T04:55:37.997 に答える
8

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

$('#your-parent .collapse').on('show.bs.collapse', function (e) {
    var actives = $('#your-parent').find('.in, .collapsing');
    actives.each( function (index, element) {
        $(element).collapse('hide');
    })
})
于 2015-12-15T09:32:46.407 に答える
2

この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 の a セレクターに追加する必要がある場合もあります。

于 2016-04-26T09:23:09.990 に答える
2

これは、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');
});
于 2018-08-06T03:18:06.043 に答える
1

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

<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>
于 2014-01-23T09:18:29.253 に答える