Bootstrap：展开其他部分

我正在制作Rails应用，并试图实现与Twitter的Bootstrap collapse相关的特定功能。正如我解释的那样忍受着我。Bootstrap：展开其他部分

我目前有以下几种观点：

enter image description here

当点击这些按钮，它们的数据切换的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来改变它们的相对位置，但是这并不起作用，因为当其中一个部分被展开时，其他按钮结束了扩大部分的中间。

最后，我想尝试在没有twitter引导页面上提到的手风琴风格行为的情况下做到这一点，但如果有人能够从设计角度让我相信这是更可取的，那么我当然会重新考虑。

来源

2012-07-13 finiteloop

你进去看了'数据parent'属性..？ – Sherbrow 2012-07-13 19:51:35

不，但我会和我会回来，让你知道这是否有帮助。谢谢！ – finiteloop 2012-07-13 20:35:46

这对我没有用。我不确定，我可能做错了什么。任何帮助仍将不胜感激。 – finiteloop 2012-07-13 20:52:16

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

Demo (jsfiddle)

第二种解决方案是结合所述事件和自己隐藏其他可折叠的元件。

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

Demo (jsfiddle)

PS：在演示奇效由min-height组为示例引起的，就忽略这个问题。

编辑：改变了JS事件从show到show.bs.collapse如Bootstrap documentation指定。

来源

2012-07-13 22:32:18 Sherbrow

“data-parent”信息在实现这一功能方面是非常宝贵的。谢谢！ – finiteloop 2012-07-16 17:41:52

对我而言，那个'

...

'是失踪的一块。简单地使用'data-parent'并没有帮助。我在bootstrap的文档中没有看到'accordion-group'类的要求。谢谢！ – Srinidhi 2013-04-13 14:57:09

@Srinidhi关于这个选择器的全部内容：[。> .accordion-group> .in'（在github上的src）]（https://github.com/twitter/bootstrap/blob/master/js/bootstrap-collapse .js＃L59） – Sherbrow 2013-04-13 16:15:19

如果你坚持按照Bootstrap惯例的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>

DEMO

来源

2016-05-09 13:55:52 cptstarling

准确的答案我期待.. – TheRumboJumbo 2016-07-18 11:38:26

此信息是正确的，但不是他的问题的答案，因为上面的解决方案将每个部分都放在其标题下，而他需要将所有标题一起显示，然后在其内容之间切换。 – 2016-07-18 13:06:32

论文打字员... – 2017-09-20 19:33:42

的正确方法为我工作：

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

lanopt.on("show.bs.collapse",".collapse", function(){ 
    lanopt.find(".collapse.in").collapse("hide"); 
});

来源

2017-01-08 09:35:30

如果你不想改变你的标记，这个功能做的伎俩：

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

每当单击按钮时，所有部门离子变得崩溃。然后引导程序打开你选择的那个。

来源

2017-03-27 15:31:31

这个通用的解决方案对我来说工作得非常好。我不想使用一个典型的手风琴团队，这是完美的。谢谢！ – 2017-06-05 17:59:20

什么是（e）'在这里？ – Nofel 2017-08-30 09:39:06

@Nofel e = eventObject您可以使用它 - 例如 - 以这种方式防止默认的点击行为：e.preventDefault（）; – 2017-08-30 09:58:24

引导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-24 11:37:58

如果使用的是引导4，你不想改变你的标记：

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

来源

2017-09-04 22:17:23 Aberm

Bootstrap：展开其他部分

回答

相关问题