引导程序：展开一个区域时折叠其他区域

76

我正在制作Rails应用程序，并试图实现与Twitter的Bootstrap崩溃相关的特定功能。当我解释时，请忍受我。

我目前有以下观点：

在此处输入图片说明

单击这些按钮中的每个按钮时，它们的数据切换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>

我这样设置它们，因为我希望按钮连续并排放置。如果我将按钮移动到视图的正上方，它们会展开/折叠，那么按钮会堆叠在一起。

因此，我的最终目标是使三个按钮并排放置，并使它们合拢并展开各自的部分。当前的设置有效，但是有点尴尬。例如，如果某人先展开键部分，然后再展开属性部分，则他们必须在键部分下面滚动。

有两种可能的解决方案。一种是按下一个按钮会导致其他2个按钮自身折叠。这意味着在任何给定时间，这些部分中只有一个被扩展。

我认为更好的解决方案是使键扩展，则右侧的按钮向下移至键div的底部，而属性扩展时，编辑详细信息按钮移至该div的底部。这可能吗？我已经尝试过通过将按钮堆叠在一起并通过css更改它们的相对位置来做到这一点，但这没有用，因为当其中一个部分被展开时，其他按钮最终会在按钮中的尴尬处出现。展开部分的中间。

最后，我想尝试不使用Twitter的引导页面上提到的手风琴样式行为来执行此操作，但是如果有人可以从设计的角度说服我我认为它是更可取的，那么我肯定会重新考虑。

twitter-bootstrap  collapse 
— 有限回路
source
您是否已调查data-parent属性..？
— Sherbrow
不，但是我会并且我会再回来告诉您是否有帮助。谢谢！
— finiteloop
那对我没用。我不确定，我可能做错了什么。任何帮助仍将不胜感激。
— finiteloop

Answers:

97

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

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

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为Bootstrap文档中指定的。

— Sherbrow
source
8
对我来说，那<div class="accordion-group">...</div>是丢失的部分。简单地使用data-parent并没有帮助。我没有accordion-group在bootstrap的文档中看到类的要求。谢谢！
— Srinidhi 2013年
2
@Srinidhi都是关于这个选择器的：'> .accordion-group > .in'（github上的src）
— Sherbrow 2013年
1
像“此jsfiddle损坏”中那样损坏。
— 莱昂佩尔蒂埃
2
这在Bootstrap 3上不起作用。问题已打开：github.com/twbs/bootstrap/issues/10966
— Keith W.
5
如果您的标记不符合非常严格的元素层次结构，则第一种解决方案不适用于BS3。因此，解决方案2更好。
33

如果您不想更改标记，则可以使用此功能：

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

每当单击按钮时，所有部分都会折叠。然后引导程序将打开您选择的那个。

— GrafiCode
source
1
这个通用解决方案对我来说非常有效。我不想使用典型的手风琴乐队，这很完美。谢谢！
— Rachel S
这是(e)什么
— 本地主机
1
@Nofel e = eventObject您可以使用它，例如，通过这种方式来防止默认的点击行为：e.preventDefault（）;
— GrafiCode
1
啊，当我单击“ Add”时，我的手风琴是即时创建的，如何添加到最后生成的代码而不是隐藏的代码中。我试过了，但是不起作用`$（'button'）。click（function（e）{$（'。collapse'）。collapse（'hide'）; $（'。collapse'）。last（）。 crash（'show'）;`}）;
— 本地主机
如果您想回答这个问题
— 本地主机
15

对于Bootstrap v4.1

将data-parent属性添加到collapse元素上，而不是上button。

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

— 胡安·卡洛斯·伊巴拉（Juan Carlos Ibarra）
source
当我从Bootstrap 3.3.6升级到最新的v4时，拨动开关停止工作时，这对我
— 有用
对我来说，在Bootstrap 4.3.1上表现出色。感谢您提供此简单修复程序！👍–
— Preben
10

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

var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.show').collapse('hide');
});
— 阿伯姆
source
对于嵌套列表仅供参考，无济于事。
— tnk479'1
4

具有内容下方并排按钮的Bootstrap 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>
展开摘要

具有内容上方并排按钮的Bootstrap 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>
展开摘要

— 弗兰克·格鲁特
source
1
重要的是要注意，Bootstrap 3需要内容块周围的class =“ panel”才能像手风琴一样工作。
— 乔纳斯·埃伯勒
3

如果您坚持使用HTML结构并根据Bootstrap约定使用适当的选择器，则应该没事。

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

演示

— cptstarling
source
1
此信息是正确的，但不是他的问题的答案，因为上述解决方案将每个部分放在其标题下，而他需要同时显示所有标题然后在其内容之间切换。
— Peter T.
3

在bootstrap 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");
    });
});
— 德尔
source
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');
});
— 穆拉特·萨蒂尔
source
这.not(this)就是我想要的东西！
— 菲利普·昆兰
0

该方法适合我：

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

lanopt.on("show.bs.collapse",".collapse", function(){
   lanopt.find(".collapse.in").collapse("hide");
});
— 鲁贝尔·侯赛因
source
0

这对我很有帮助：

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

它已折叠已打开的部分。感谢GrafiCode Studio

— 帕维尔·L。
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.