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

解决方案：我从＆＃34;可折叠＆＃34;更改了引导程序。到手风琴＆＃34;。谢谢@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>

现在代码被清理了一下，问题仍然需要解决。

问题（续）：限制多个面板一次打开的自动折叠转换仍然存在问题。

解决方案：我必须更改＆＃34; accordion-group＆＃34;的数据类。到＆＃34;小组＆＃34;

如何在bootstrap数据目标上创建折叠式样式折叠？

1 个答案: