如何在引导数据目标上创建折叠式手风琴风格？

Question

我有多个折叠的数据目标。我希望一次只能激活 1 个可折叠设备。

我的目标：点击不同的折叠对象后，前一个对象会“重新折叠”。

我最初假设重新组织 html，但后来开始怀疑 Javascript。

有什么建议吗？我喜欢所有的意见。

谢谢

---

未折叠：

---

部署第一个折叠：

---

在第一次折叠仍然部署时激活了第二次折叠：

---

HTML/引导程序

<!--Collapsible Button Group -->

    <div class="col-md-4">
         <li data-toggle="collapse" data-target="#collapseNetwork" aria-expanded="false" aria-controls="collapseNetwork" class="btn btn-link">
            <%= link_to "", "#", class:'fa fa-users' %>
        </li>
    </div>

    <div class="col-md-4">
        <li data-toggle="collapse" data-target="#collapseModifications" aria-expanded="false" aria-controls="collapseModifications" class="btn btn-link">
            <%= link_to "", "#", class:'fa fa-male' %>
        </li>
    </div>

    <div class="col-md-4">
        <li data-toggle="collapse" data-target="#collapseAccolades" aria-expanded="false" aria-controls="collapseAccolades" class="btn btn-link">
            <%= link_to "", "#", class:'fa fa-diamond' %>
        </li>
    </div>

        <!--Collapsed Data Group-->
        <div class="collapse" id="collapseNetwork"><br /><br />
        <div class="panel">
            <h3>NETWORK</h3><hr />
            <ul class="media-list media-list-users list-group">
              <li class="list-group-item">
                <div class="media">
                  <a class="media-left" href="#">
                    <%= image_tag @user.profile.avatar.url(:thumb), class:'media-object img-circle' %>
                  </a>
                  <div class="media-body">
                    <button class="btn btn-primary-outline btn-sm pull-right">
                      <span class="icon icon-add-user"></span> Follow
                    </button>
                    <strong>Jane Smith</strong>
                    <small>@jcs - San Francisco</small>
                  </div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="media">
                  <a class="media-left" href="#">
                    <%= image_tag @user.profile.avatar.url(:thumb), class:'media-object img-circle' %>
                  </a>
                  <div class="media-body">
                    <button class="btn btn-primary-outline btn-sm pull-right">
                      <span class="icon icon-add-user"></span> Follow
                    </button>
                    <strong>John Smith</strong>
                    <small>@jcs - Anywhere</small>
                  </div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="media">
                  <a class="media-left" href="#">
                    <%= image_tag @user.profile.avatar.url(:thumb), class:'media-object img-circle' %>
                  </a>
                  <div class="media-body">
                    <button class="btn btn-primary-outline btn-sm pull-right">
                      <span class="icon icon-add-user"></span> Follow
                    </button>
                    <strong>Nathaniel</strong>
                    <small>@njr - Charleston</small>
                  </div>
                </div>
              </li>
            </ul>
        </div>
    </div>

    <div class="collapse" id="collapseModifications"><br /><br />
        <div class="panel">
            <h3>MODIFICATIONS</h3>

        </div>
    </div>

    <div class="collapse" id="collapseAccolades"><br /><br />
        <div class="panel">
            <h3>ACCOLADES</h3>
        </div>
    </div>

Answer 1

解决方案：我将引导程序从“可折叠”更改为“手风琴”。谢谢@Rob。

基本解决方案如下。谢谢@Sherbrow。完整的讨论可以在这里找到：stackoverflow

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

现在代码已经清理了一点，问题仍然需要解决。

问题（续）：限制一次打开多个面板的自动折叠过渡仍然是一个问题。

解决方案：我必须将数据类从“accordion-group”更改为“panel”