86

私はRailsアプリを作成しており、Twitterのブートストラップ崩壊に関連する特定の機能を実現しようとしています。私がそれを説明するとき、私と一緒に耐えなさい。

私は現在次の見解を持っています：

ここに画像の説明を入力してください

これらの各ボタンをクリックすると、データ切り替えdivが展開されます。ビューは次のように設定されます。

    <button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>

    <div class="collapse indent" id="keys">
        <!--content-->
    </div>

    <div class="collapse indent" id="attrs">
        <!--content-->
    </div>

    <div class="collapse" id="edit">
        <!--content-->
    </div>

ボタンを並べて並べたいので、このように設定しました。ボタンをビューの真上に移動すると、ボタンが展開/折りたたまれ、ボタンが重なり合って表示されます。

したがって、私の最終目標は、3つのボタンを並べて、それぞれのセクションを折りたたんだり展開したりすることです。現在の設定は機能しますが、少し厄介です。たとえば、誰かがキーセクションを展開してから属性セクションを展開した場合、キーセクションの下をスクロールする必要があります。

この問題には2つの解決策があります。1つは、1つのボタンを押すと、他の2つが折りたたまれます。これは、常に、これらのセクションの1つだけが展開されることを意味します。

より良い解決策は、キーを展開すると右側のボタンがキーdivの下部に移動し、属性を展開すると[詳細の編集]ボタンがそのdivの下部に移動するようにすることだと思います。 。これは可能ですか？私はすでにボタンを積み重ねてcssを介して相対的な位置を変更することでそれを試みましたが、セクションの1つを展開すると、他のボタンが厄介な場所になってしまうため、うまくいきませんでした。展開されたセクションの中央。

最後に、ツイッターのブートストラップページにあるようなアコーディオンスタイルの振る舞いをせずにこれをやってみたいと思いますが、デザインの観点から誰かが私にそれが望ましいと納得させることができれば、私は確かに再考します。

4

12 に答える 12

106

を使用してdata-parent、最初の解決策は、セレクタアーキテクチャの例に固執することです

<div id="myGroup">
    <button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys  <span class="badge badge-info pull-right">X</span></button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button>

    <div class="accordion-group">
        <div class="collapse indent" id="keys">
            keys
        </div>

        <div class="collapse indent" id="attrs">
            attrs
        </div>

        <div class="collapse" id="edit">
            edit
        </div>
    </div>
</div>

デモ（jsfiddle）

2番目の解決策は、イベントをバインドし、他の折りたたみ可能な要素を自分で非表示にすることです。

var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
    $myGroup.find('.collapse.in').collapse('hide');
});

デモ（jsfiddle）

PS：デモの奇妙な効果はmin-height、例のセットが原因です。無視してください。

編集：JSイベントをブートストラップドキュメントで指定されているようにからshowに変更しました。show.bs.collapse

于 2012-07-13T22:32:18.720 に答える
45

マークアップを変更したくない場合は、この関数がトリックを実行します。

jQuery('button').click( function(e) {
    jQuery('.collapse').collapse('hide');
});

ボタンをクリックするたびに、すべてのセクションが折りたたまれます。次に、ブートストラップは選択したものを開きます。

于 2017-03-27T15:31:31.173 に答える
24

Bootstrapv5の場合

要素に data-bs-parent属性を追加します。collapse更新してくれた@Dianaに感謝します。

Bootstrapv4.1の場合

の代わりに、要素に data-parent属性を追加します。collapsebutton

<div id="myGroup">
<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys  <span class="badge badge-info pull-right">X</span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>

<div class="accordion-group">
    <div class="collapse indent" id="keys"  data-parent="#myGroup">
        keys
    </div>

    <div class="collapse indent" id="attrs"  data-parent="#myGroup">
        attrs
    </div>

    <div class="collapse" id="edit"  data-parent="#myGroup">
        edit
    </div>
</div>
于 2019-04-17T13:42:59.363 に答える
10

Bootstrap 4を使用していて、マークアップを変更したくない場合：

var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.show').collapse('hide');
});
于 2017-09-04T22:17:23.217 に答える
4

コンテンツの下にボタンを並べたブートストラップ3の例

.panel-heading {
  display: inline-block;
}

.panel-group .panel+.panel {
  margin: 0;
  border: 0;
}

.panel {
  border: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
</div>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
    </h4>
</div>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
    </h4>
</div>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collaple Group 3</a>
    </h4>
</div>

コンテンツの上にボタンを並べたブートストラップ3の例

.panel-heading {
  display: inline-block;
}

.panel-group .panel+.panel {
  margin: 0;
  border: 0;
}

.panel {
  border: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
    </h4>
</div>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
    </h4>
</div>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collaple Group 3</a>
    </h4>
</div>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div id="collapse3" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        </div>
    </div>
</div>

于 2017-05-24T11:37:58.160 に答える
3

ブートストラップ規則に従ってHTML構造と適切なセレクターに固執する場合は、問題ないはずです。

<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="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
</div>

デモ

于 2016-05-09T13:55:52.620 に答える
3

ブートストラップ4では、すべての折りたたみを閉じるには、次のように機能します。

アクション：

<button id="CloseAll" class="btn btn-primary" type="button" data-toggle="collapse">Close All</button>

JQUERY：

$(document).ready(function() {
    $("#CloseAll").on('click', function() {
        $(".collapse").removeClass("show");
    });
});
于 2018-07-18T06:11:39.413 に答える
2

これを使って：

$('.panel-defaul.ph').on('show.bs.collapse', function () {
    $(this).children('.panel-heading').addClass('panel-heading-collapsed');  
    $('.panel-defaul.ph').not(this).children('.panel-collapse').removeClass('in');
});
于 2018-04-03T19:06:09.193 に答える
1

ここでブートストラップ4>4.1.1の魅力のように機能します

var myGroup = $('your-list');

myGroup.on('show.bs.collapse','.collapse', function() {
   myGroup.find('.collapse.show').collapse('hide');
});
于 2018-08-06T23:44:54.133 に答える
1

これは私にとって役に立ちました：

    jQuery('button').click( function(e) {
    jQuery('.in').collapse('hide');
});

すでに開いているセクションは折りたたまれています。GrafiCodeStudioに感謝します

于 2018-10-09T16:34:36.217 に答える
1

Bootstrap5で

ドキュメントに記載されているように、「data-bs-parent=..」属性を使用できます

If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.

bootstrap5ドキュメントで詳細を参照してください

于 2021-02-20T05:36:08.870 に答える
0

この方法は私にとって適切に機能します：

var lanopt = $(".language-option");

lanopt.on("show.bs.collapse",".collapse", function(){
   lanopt.find(".collapse.in").collapse("hide");
});
于 2017-01-08T09:35:30.743 に答える