Javascript 使用jquery确保一次只折叠一个选项卡

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

这就是关闭选项卡时DIV的外观。注意孩子们的名字。该类已“折叠”附加了锚标记

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

------------------
---------------------
完成0%
----

以及下拉列表：

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

正文
....
正文
....

我不确定您的代码是如何构造的，也不确定您想要达到的效果，但这是总体思路：

HTML:

Javascript:

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

这是一张好的，这是一张可折叠的桌子：

Bootply：

Js：

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

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

HTML：

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

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

正文1
正文2
1.11.2
2.12.2

使用CSS类处理折叠状态，然后使用jQuery将该类从所有div中删除，然后再将其应用于要折叠的div。@APAD1可以理解您的说法。你能给我举个例子吗？@Dondada你能更好地解释你想要什么并粘贴一个清晰的代码吗？你说的是一个div，我只看到一个tbody，你说的是collapse，我看不到元素#accordion…@littlepig我基本上是想完成这个我清理了我的dom结构。也许你可以看看。