Bootstrap:展开时折叠其他部分 [英] Bootstrap: Collapse other sections when one is expanded

问题描述

我正在制作一个 Rails 应用程序，并试图实现与 Twitter 的 Bootstrap 相关的特定功能

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

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

演示(jsfiddle)

PS:demo 中的奇怪效果是由示例设置的 min-height 引起的，请忽略.

<小时>

按照引导程序文档.

I am making a Rails app, and am trying to achieve a particular functionality relating to Twitter's Bootstrap collapse. Bear with me as I explain it.

I currently have the following view:

When each of these buttons is clicked, their data-toggle div is expanded. The view is set-up as follows:

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

I have them set-up like this, because I want the buttons side by side, in a row. If I move the buttons to be right above the view they expand/collapse, then the buttons stack on top of one another.

So, my end goal is to have the three buttons side-by-side and have them collapse and expand their respective sections. The current set-up works, however is a little awkward. For example, if someone expands the keys section and then expands the attributes section, they have to scroll below the keys section.

There are two possible solutions to this problem. One is that pressing one button causes the other 2 to collapse themselves. This would mean that at any given time, only one of these sections is expanded.

The better solution, I think would be to have it so that when keys is expanded, the buttons to the right move down to the bottom of the keys div, and when attributes is expanded, the edit details button moves to the bottom of that div. Is this possible? I have already tried to do it by letting the buttons stack on top of each other and changing their relative locations through css, but that didn't work because when one of the sections was expanded, the other buttons ended up in awkward spots in the middle of the expanded section.

Lastly, I would like to try to do this without the accordion style behavior as mentioned on twitter's bootstrap page, but if someone can convince me from a design standpoint that it is preferable, I would certainly reconsider.

解决方案

Using data-parent, first solution is to stick to the example selector architecture

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

Second solution is to bind on the events and hide the other collapsible elements yourself.

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

Demo (jsfiddle)

PS: the strange effect in the demos is caused by the min-height set for the example, just ignore that.

---

Edit: changed the JS event from show to show.bs.collapse as specified in Bootstrap documentation.

这篇关于Bootstrap:展开时折叠其他部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！