[英]Bootstrap 3 - Expanding an Collapsing Nested Table Rows
I have a web page that uses Bootstrap 3. In this page, I'm trying to show the relationship between grandparent, parent, and child. 我有一个使用Bootstrap 3的网页。在此页面中,我试图显示祖父母,父母和孩子之间的关系。 To do this, I have table rows that can expand/collapse.
为此,我有可以扩展/折叠的表行。 I've setup a Bootply here .
我在这里设置了Bootply。 My HTML looks like this:
我的HTML看起来像这样:
<div id="grandparent" class="list-group-item">
<div data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent">
<ul class="list-inline">
<li id="grandparentIcon">></li>
<li>Grandparent</li>
</ul>
</div>
<div class="collapse" id="grandparentContent" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Created On</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse">
<td><div>></div></td>
<td>Parent 1</td>
<td>04/02/2017</td>
<td>04/04/2017</td>
</tr>
<tr class="collapse">
<td></td>
<td>Child A</td>
<td>04/01/2017</td>
<td>04/05/2017</td>
</tr>
<tr class="collapse">
<td></td>
<td>Child B</td>
<td>04/03/2017</td>
<td>04/04/2017</td>
</tr>
<tr data-toggle="collapse">
<td><div>></div></td>
<td>Parent 2</td>
<td>04/03/2017</td>
<td>04/10/2017</td>
</tr>
<tr class="collapse">
<td></td>
<td>Child X</td>
<td>04/10/2017</td>
<td>04/11/2017</td>
</tr>
</tbody>
</table>
</div>
</div>
When either a grandparent or parent is expanded, I'm trying to change the related icon from ">" to "v". 当祖父母或父母扩大时,我正在尝试将相关图标从“>”更改为“ v”。 However, this doesn't work.
但是,这不起作用。 I don't understand why.
我不明白为什么。 Any help is appreciated.
任何帮助表示赞赏。
You can do what you are trying to do by adding two things: 您可以通过添加以下两项来完成您想做的事情:
collapsed
class that toggles each time a grandparent or parent are clicked, to represent if it is expanded or collapsed. collapsed
类,每次单击祖父母或父母时都会切换,以表示它是展开还是折叠。 collapsed
class is active it shows ">" and when it is not active (it is expanded) it shows a "v". collapsed
类处于活动状态时显示“>”,而在其未激活(展开状态)时显示“ v”。 Updated Bootply Here 在这里更新Bootply
Your main issue is that you were missing data-target
for your parent rows, and you also were only changing the grandparent icon with your jQuery. 您的主要问题是您缺少父行的
data-target
,并且您也仅使用jQuery更改了祖父母图标。
Key jQuery 关键jQuery
$('[data-toggle="collapse"]').on('click', function() {
$(this).toggleClass('collapsed');
});
Key CSS 关键CSS
.collapsed .icon-class:before {
content: '>';
}
.icon-class:before {
content: 'v';
}
Heres a fixed version, change the code to your own liking. 继承人的固定版本,根据自己的喜好更改代码。
http://www.bootply.com/sCCEzKCLsI# http://www.bootply.com/sCCEzKCLsI#
But essentially the show.bs.collapse
and hide.bs.collapse
events are fired from the .collapse
and not the the data-toggle="collapse"
element. 但是本质上,
show.bs.collapse
和hide.bs.collapse
事件是从.collapse
而不是data-toggle="collapse"
元素data-toggle="collapse"
。
Also to addition to WilomGfx's answer , you need to assign the data-target
to the table rows. 除了WilomGfx的答案外 ,您还需要将
data-target
分配给表行。
HTML HTML
<div id="grandparent" class="list-group-item">
<div id="expander" data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent">
<ul class="list-inline">
<li id="grandparentIcon">></li>
<li>Grandparent</li>
</ul>
</div>
<div class="collapse" id="grandparentContent" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Created On</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#childOne">
<td><div>></div></td>
<td>Parent 1</td>
<td>04/02/2017</td>
<td>04/04/2017</td>
</tr>
<tr class="collapse" id="childOne">
<td></td>
<td>Child A</td>
<td>04/01/2017</td>
<td>04/05/2017</td>
</tr>
<tr class="collapse">
<td></td>
<td>Child B</td>
<td>04/03/2017</td>
<td>04/04/2017</td>
</tr>
<tr data-toggle="collapse" data-target="#childTwo">
<td><div>></div></td>
<td>Parent 2</td>
<td>04/03/2017</td>
<td>04/10/2017</td>
</tr>
<tr class="collapse" id="childTwo">
<td></td>
<td>Child X</td>
<td>04/10/2017</td>
<td>04/11/2017</td>
</tr>
</tbody>
</table>
</div>
</div>
Script 脚本
$('.collapse').on('show.bs.collapse', function () {
var groupId = $('#expander').attr('data-group-id');
console.log(groupId);
if (groupId) {
$('#grandparentIcon').html('v');
}
});
$('.collapse').on('hide.bs.collapse', function () {
var groupId = $('#expander').attr('data-group-id');
console.log(groupId);
if (groupId) {
$('#' + groupId + 'Icon').html('>');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.