我有多个折叠数据目标。我只想一次激活 1 个可折叠的。
我的目标:点击不同的折叠对象后,之前的对象将“重新折叠”。
我最初假设重新组织 html,但后来开始怀疑 Javascript。
有什么建议吗?我喜欢所有的意见。
谢谢
未折叠:
部署第一个折叠:
在第一个折叠仍然部署时激活第二个折叠:
HTML/Bootstrap
<!--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>
最佳答案
解决方案:我将 Bootstrap 从“可折叠”更改为“ Accordion ”。谢谢@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”
关于javascript - 如何在 Bootstrap 数据目标上创建 Accordion 样式折叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39622396/