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

Question

我正在寻找一些帮助设置一个“规则”，一次只允许一个选项卡被折叠。因此，如果一个标签页崩溃，并且您尝试折叠另一个标签页，则会关闭原始标签页。

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

Answer 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

Answer 2

好，这里是TBODY可折叠的桌子：

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