这里是Fiddle

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>

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

2 个答案:

这里是Fiddle