Twitter bootstrap 引导：展开一个部分时折叠其他部分

我正在制作一个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>

键
属性
编辑详细信息

我把它们设置成这样，因为我想要按钮并排，排成一行。如果我将按钮移动到视图的正上方，它们将展开/折叠，那么按钮将堆叠在彼此的顶部

因此，我的最终目标是让这三个按钮并排放置，并使它们折叠和扩展各自的部分。然而，目前的设置有点尴尬。例如，如果有人展开“关键点”部分，然后展开“属性”部分，则他们必须在“关键点”部分下方滚动

这个问题有两种可能的解决办法。一是按下一个按钮会导致另外两个按钮自行崩溃。这意味着在任何给定时间，这些部分中只有一个被扩展

我认为更好的解决方案是，当关键点展开时，右边的按钮向下移动到关键点div的底部，当属性展开时，编辑细节按钮移动到该div的底部。这可能吗？我已经尝试通过让按钮堆叠在一起并且通过CSS来改变它们的相对位置，但是这不起作用，因为当其中一个部分被扩展时，其他按钮最终在扩展部分的中间处于尴尬的位置。

---

最后，我想尽量避免推特引导页面上提到的手风琴风格的行为，但如果有人能从设计角度说服我，认为这更可取，我肯定会重新考虑。

使用

数据父项

，第一个解决方案是坚持示例选择器架构

键X
属性
编辑详细信息
钥匙
属性
编辑

第二种解决方案是绑定事件并隐藏其他可折叠元素

var$myGroup=$（'#myGroup'）；
$myGroup.on（'show.bs.collapse'，'.collapse'，function（）{
$myGroup.find（'.collapse.in'）.collapse（'hide'）；
});

PS：演示中的奇怪效果是由示例中设置的

min height

引起的，请忽略这一点

---

---

编辑：将JS事件从

show

更改为

show.bs.collapse

，如中所述。

如果根据引导约定坚持使用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> 

Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。我们在这里吃得很少，
我们的实验室是一个普通的实验室。
Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。我们在这里吃得很少，
我们的实验室是一个普通的实验室。
Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。我们在这里吃得很少，
我们的实验室是一个普通的实验室。

---

该方法适合我：

var lanopt=$（“.language option”）；
lanopt.on（“show.bs.collapse”，“.collapse”，function（）{
lanopt.find（“.collapse.in”）.collapse（“隐藏”）；
});

如果您不想更改标记，此函数将执行以下操作：

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

---

每当单击按钮时，所有部分都会折叠。然后bootstrap打开您选择的一个。

bootstrap 3示例，内容下方有并排按钮

。面板标题{
显示：内联块；
}
.面板组.面板+.面板{
保证金：0；
边界：0；
}
.小组{
边界：0！重要；
-网络工具包盒阴影：无！重要；
盒影：无！重要；
背景色：透明！重要；
}

Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。我们在这里吃得很少，
我们的实验室是一个普通的实验室。
Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。我们在这里吃得很少，
我们的实验室是一个普通的实验室。
Lorem ipsum dolor sit amet，奉献精英，
这是临时性的劳动和就业机会。我们在这里吃得很少，
我们的实验室是一个普通的实验室。

如果您使用的是Bootstrap 4，并且不想更改标记：

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

使用以下命令：

$('.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');
}); 

---

在bootstrap 4中，关闭所有折叠的操作如下：

行动：

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

---

在bootstrap 4>4.1.1中像一个魔咒一样工作

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

myGroup.on('show.bs.collapse','.collapse', function() {
   myGroup.find('.collapse.show').collapse('hide');
});

---

这对我很有帮助：

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

它已经打开了。 格雷菲克德工作室酒店

对于引导v4.1

将

数据父项

属性添加到t

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

<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>

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.