3

Bootstrap 3 のアコーディオンを ID なしで使用する方法を探しています。オープナーと折りたたまれた領域をリンクするために任意の一意の ID を使用したくありません。

私の質問のこの最初の部分は Bootstrap 2 で回答されました: ID を使用せずに兄弟 DOM 要素を参照する Bootstrap の「データターゲット」を指定できますか?

...だから私は上記の答えをBootstrap 3で動作するように変換しました(フィドルリンク) :

$('body').on('click', '[data-toggle=collapse-next]', function (e) {
  var $target = $(this).parents('.panel').find('.panel-collapse');
  $target.collapse('toggle');
});

ただし、「他の人を閉じる」機能も引き続き機能するようにしdata-parent="#accordion"ます。標準のアコーディオンが Bootstrap 3 ドキュメントで行うように、親の ID を参照することは気にしません。つまり、これは ID なしである必要はありません!

修正が見つかった後の更新

以下の bbone の回答を受け入れた後、このブロックを更新して、質問されたとおりに機能するようにしました。(作業デモ js フィドル) .

$('.panel-collapse').collapse({toggle: false});
$('body').on('click', '[data-toggle=collapse-next]', function (e) {
    e.preventDefault();

    // Try to close all of the collapse areas first
    var parent_id = $(this).data('parent');
    $(parent_id+' .panel-collapse').collapse('hide');

    // ...then open just the one we want
    var $target = $(this).parents('.panel').find('.panel-collapse');
    $target.collapse('toggle');
});
4

3 に答える 3

1

ネストされた折りたたみパネルで動作するように、このスクリプトを更新しました。どうぞ：

$(function(){
  $('.panel-collapse').collapse({toggle: false});
  $('body').on('click', '[data-toggle=collapse-next]', function (e) {
    e.preventDefault();

    // Try to close all of the collapse areas first
    var parent_id = $(this).data('parent');
    $(parent_id + ' > .panel > .panel-collapse').collapse('hide');

    // ...then open just the one we want
    var $target = $(this).parentsUntil('.panel-group', '.panel').children('.panel-collapse');
    $target.collapse('toggle');
  }); 
});
于 2015-04-23T09:12:24.840 に答える
0

ノックアウトJsを使用した可能な代替ソリューション。パネルの Id 属性は、コードの後半で署名されます。その後、「collapse_」リテラルを使用して、ターゲット データ属性と Div id 属性に自動的に反映されます。

<li class="panel panel-info" data-bind="with: $root.ActivityById($root.GetId($element))">
    <div class="panel-heading">
        <a data-toggle="collapse" data-bind="attr: { 'data-target' : '#collapse_' + Id() }" href="#test" class="collapsed">
            Header
        </a>
    </div>
    <div data-bind="attr: { id : 'collapse_' + Id() }" class="panel-collapse collapse in">
        <div class=" panel-body">
            Panel body
        </div>
        <div class="panel-footer">
            Panel footer
        </div>
    </div>
</li>

誰かの役に立てば幸いです...

于 2015-07-21T15:12:45.200 に答える