【问题标题】：Use jquery to make sure only one tab is collapsed at a time使用 jquery 确保一次只折叠一个选项卡
【发布时间】：2014-09-19 03:56:26
【问题描述】：

我正在寻求有关设置“规则”的帮助，该规则一次只允许折叠一个标签。因此，如果一个选项卡被折叠并且您尝试折叠另一个选项卡，它将关闭原始选项卡。

这是标签页关闭时 DIV 的样子。注意 .name 孩子。该类已“折叠”附加了锚标记。

   <tbody id="objective" class="translate">
        <tr class="tableSubHeader active incomplete">
        <th class="icon"><a data-toggle="collapse" data-parent="#accordion" href="#activities_21dd418d-3e6a-4afb-ae02-8f546043d9fa" class="collapsed"><i class="fa fa-chevron-circle-right"></i></a>
        </th>
------------------
     <th class="name">
    <a data-toggle="collapse" data-parent="#accordion" href="#activities_21dd418d-3e6a-4afb-ae02-8f546043d9fa" class="collapsed">LES B1 Module 1</a>
    </th>
---------------------
        <th class="item_progress"><div class="progress"><div class="progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0% complete
                        </div></div></th>
        <th class="score"><i class="fa fa-trophy tableSubHeader active incomplete" alt="LES B1 Module 1"></i>--</th><th class="duration">--</th><th class="actions"></th>
        </tr>
        </tbody>

还有下拉菜单：

<tbody id="activities" class="panel-collapse collapse" style="height: 0px;"></tbody>

这是它折叠时的样子：

<tbody id="activities" class="panel-collapse in" style="height: auto;"></tbody>

DOM 结构的干净版本：

<tbody id="objective">
  <th class="name">
    <a data-toggle="collapse" data-parent="#accordion" class="collapsed">Text</a>
  </th>
</tbody>

<tbody id="activities" class="panel-collapse collapse" style="height:0px;">
  ....
</tbody>

<tbody id="objective">
  <th class="name">
    <a data-toggle="collapse" data-parent="#accordion" class="collapsed">Text</a>
  </th>
</tbody>

<tbody id="activities" class="panel-collapse collapse" style="height:0px;">
  ....
</tbody>

【问题讨论】：

使用 CSS 类处理折叠状态，然后使用 jQuery 从所有 div 中删除该类，然后再将其应用到您想要折叠的那个。
@APAD1 你说的很有道理。你能给我举个例子吗？
@Dondada 你能更好地解释你想要什么并粘贴清晰的代码吗？你说的是一个 div，我只看到一个 tbody，你说的是折叠，我没有看到 #accordion 元素。 ..
@TheLittlePig 我基本上是在尝试完成这个jsfiddle.net/dozoisch/SMT9D/45

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我不确定你的代码的结构或你想要的效果，但这是一般的想法：

HTML：

<div id="container"><div class="collapsed"><button>collapse</button></div></div>
<div id="container"><div><button>collapse</button></div></div>
<div id="container"><div><button>collapse</button></div></div>
<div id="container"><div><button>collapse</button></div></div>
<div id="container"><div><button>collapse</button></div></div>

CSS：

#container {
    border:1px solid black;
    margin-bottom:1em;
    width:200px;
}
    #container > div {
        height:100px;
        background:#000;
    }

button {
    color:#000;
}

.collapsed { display:none }

Javascript：

$('button').click(function() {
    $('#container > div').removeClass('collapsed');
    $(this).parent().addClass('collapsed');
});

这是Fiddle

【讨论】：

我清理了我的 dom 结构。也许你可以看看。

【解决方案2】：

好的，这是一个可折叠的表格：

引导层：http://www.bootply.com/AstvtgvOmX

Js：

$('.panel-collapse').on('show.bs.collapse', function(){
    $(".collapse").removeClass('in');
});

HTML：

<table class="table panel-group" id="accordion2">
<thead><tr>
  <th data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">body 1</th>
  <th data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">body 2</th></tr></thead>

  <tbody id="collapseOne" class="panel-collapse collapse in"><tr><td>1.1</td><td>1.2</td></tr></tbody>
  <tbody id="collapseTwo" class="panel-collapse collapse"><tr><td>2.1</td><td>2.2</td></tr></tbody>

</table>

【讨论】：