我在btn-group中有3个按钮,我只需要查看按钮的列表,一旦按下其他按钮,折叠列表便会消失,而应仅显示按钮的列表。
请提示。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="btn-group btn-group-justified">
<a href="#demo" class="btn btn-primary" data-toggle="collapse">List 1</a>
<a href="#demo1" class="btn btn-primary" data-toggle="collapse">List 2</a>
<a href="#demo2" class="btn btn-primary" data-toggle="collapse">List 3</a>
</div>
<div id="demo" class="collapse in">
<table class="table table-striped table-bordered table-hover">
<thead>
</thead>
<tbody data-link="row" class="rowlink">
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#inputmask">Input mask</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="http://www.jasny.net/" target="_blank">jasny.net</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a>
</td>
</tbody>
</table>
</div>
<div id="demo1" class="collapse">
<table class="table table-striped table-bordered table-hover">
<thead>
</thead>
<tbody data-link="row" class="rowlink">
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#inputmask">Input mask</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="http://www.jasny.net/" target="_blank">jasny.net</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a>
</td>
</tbody>
</table>
</div>
<div id="demo2" class="collapse">
<table class="table table-striped table-bordered table-hover">
<thead>
</thead>
<tbody data-link="row" class="rowlink">
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#inputmask">Input mask</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="http://www.jasny.net/" target="_blank">jasny.net</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a>
</td>
</tbody>
</table>
</div>
</div>
最佳答案
您非常接近,只需添加一些内容即可。...
为类“容器”的div添加一个ID。这是步骤2所需的
将data-parent属性添加到按钮中,并引用步骤1中的id。data-parent属性可确保当显示可折叠项之一时,指定父级下的所有可折叠元素都将被关闭。
将可折叠元素包装在“面板”类的div中。这是必需的,因为引导程序需要一定顺序的元素。有关更多详细信息,请参见以下答案。 Bootstrap 3 Accordion button toggle "data-parent" not working
更新的代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="container" class="container">
<div class="btn-group btn-group-justified">
<a href="#demo" class="btn btn-primary" data-toggle="collapse" data-parent="#container">List 1</a>
<a href="#demo1" class="btn btn-primary" data-toggle="collapse" data-parent="#container">List 2</a>
<a href="#demo2" class="btn btn-primary" data-toggle="collapse" data-parent="#container">List 3</a>
</div>
<div class="panel">
<div id="demo" class="collapse in">
<table class="table table-striped table-bordered table-hover">
<thead>
</thead>
<tbody data-link="row" class="rowlink">
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#inputmask">Input mask</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="http://www.jasny.net/" target="_blank">jasny.net</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a>
</td>
</tbody>
</table>
</div>
<div id="demo1" class="collapse">
<table class="table table-striped table-bordered table-hover">
<thead>
</thead>
<tbody data-link="row" class="rowlink">
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#inputmask">Input mask</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="http://www.jasny.net/" target="_blank">jasny.net</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a>
</td>
</tbody>
</table>
</div>
<div id="demo2" class="collapse">
<table class="table table-striped table-bordered table-hover">
<thead>
</thead>
<tbody data-link="row" class="rowlink">
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#inputmask">Input mask</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="http://www.jasny.net/" target="_blank">jasny.net</a>
</td>
<tr class='clickable-row' data-href='url://link-for-first-row/'>
<td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a>
</td>
</tbody>
</table>
</div>
</div>
</div>