Bootstrap 4 合并 Collapse with a Table
Bootstrap 4 merge Collapse with a Table
您好，我正在尝试合并 Accordion/Collapse 的示例，如本例所示：
（接受的答案）
带有 Bootstrap table，其中一行可点击 collapse/expand 其余行。
[data-toggle="collapse"]:after {
display: inline-block;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f054";
transform: rotate(90deg) ;
transition: all linear 0.25s;
}
[data-toggle="collapse"].collapsed:after {
transform: rotate(0deg) ;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div id="accordion" role="tablist">
<table class="table">
<tbody>
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<tr role="tab" id="headingOne">
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</a>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</tbody>
</table>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
如您所见，它不起作用，向上箭头是可点击的，但它位于一行上方，而该行根本不可点击。请指教
编辑：
我已经获取了您的代码并将其修改为 table 唯一的解决方案（无卡）。我遇到的问题是，我完成它的方式是，折叠的 div 出现在所有 header 的 table 下方（不是紧接在相应的 header 下方） .我将如何重新排列下面的内容，以便#collapseOne 直接出现在 table 的第一行之后，而不是 table.
的下方
<div id="accordion">
<table class="table b-dark table-sm p-2 mb-0">
<tbody>
<tr id="headingOne" data-toggle="collapse" data-target="#collapseOne">
<td class="border-bottom b-green text-center text-white">First</td>
<td class="text-center border-right border-bottom text-white">Description</td>
<td class="border-bottom text-center text-white">Time</td>
<td class="border-bottom text-white text-right">
<i class="fa"></i>
</td>
</tr>
<tr id="headingTwo" data-toggle="collapse" data-target="#collapseTwo">
<td class="border-bottom b-green text-center text-white">Second</td>
<td class="text-center border-right border-bottom text-white">Desc</td>
<td class="border-bottom text-center text-white">Time</td>
<td class="border-bottom text-white text-right">
<i class="fa"></i>
</td>
</tr>
</tbody>
</table>
<div id="collapseOne" class="collapse show b-dark p-3 mt-0" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="text-white">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
<div id="collapseTwo" class="collapse show b-dark p-3 mt-0" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="text-white">
Another anotherprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
加油！在 <tbody> 之后不能有 <a></a> 之类的元素，除了 <tr> 之外。因此，您的 <a></a> 在 table!
之外呈现
并且由于您的 <a></a> 没有任何内容，因此呈现为隐藏！
您不必使用 <a><a> 作为折叠触发器。您可以使用任何 HTML 元素。你只需要用 data-toggle="collapse" 初始化它。由于它不是锚标记，因此它没有 href。不用担心。您可以改用 data-target="xx"。
HTML
<div id="accordion">
<div class="card">
<div class="card-header">
<table>
<tbody>
<tr id="headingOne" data-toggle="collapse" data-target="#collapseOne">
...
</tr>
</tbody>
</table>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
<div class="card">
<div class="card-header">...</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
<div class="card">
<div class="card-header">...</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
</div>
CSS (SASS)
您可以应用一点 CSS 使该行看起来像 link / 可点击。
#headingOne {
cursor: pointer;
color: var(--primary);
}
结果
演示： https://jsfiddle.net/davidliang2008/1t5gaf49/
更改插入符
我看到您还想在单击每个可折叠项后更改插入符号。只需 CSS 即可轻松完成此操作，因为当可折叠对象折叠时，bootstrap 会在其中添加 .collapsed class。您可以根据此更改 font-awesome 图标的内容以显示向左箭头或向下箭头。
HTML
<a class="collapsed" data-toggle="collapse">
Collapsible Group Item
<span class="float-right">
<i class="fa"></i>
</span>
</a>
CSS (SASS)
[data-toggle="collapse"] {
.fa:after {
content: '\f078'; /* chevron-down */
}
&.collapsed {
.fa:after {
content: '\f054'; /* chevron-right */
}
}
}
结果
您好，我正在尝试合并 Accordion/Collapse 的示例，如本例所示：
带有 Bootstrap table，其中一行可点击 collapse/expand 其余行。
[data-toggle="collapse"]:after {
display: inline-block;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f054";
transform: rotate(90deg) ;
transition: all linear 0.25s;
}
[data-toggle="collapse"].collapsed:after {
transform: rotate(0deg) ;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div id="accordion" role="tablist">
<table class="table">
<tbody>
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<tr role="tab" id="headingOne">
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</a>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</tbody>
</table>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
如您所见，它不起作用，向上箭头是可点击的，但它位于一行上方，而该行根本不可点击。请指教
编辑：
我已经获取了您的代码并将其修改为 table 唯一的解决方案（无卡）。我遇到的问题是，我完成它的方式是，折叠的 div 出现在所有 header 的 table 下方（不是紧接在相应的 header 下方） .我将如何重新排列下面的内容，以便#collapseOne 直接出现在 table 的第一行之后，而不是 table.
的下方<div id="accordion">
<table class="table b-dark table-sm p-2 mb-0">
<tbody>
<tr id="headingOne" data-toggle="collapse" data-target="#collapseOne">
<td class="border-bottom b-green text-center text-white">First</td>
<td class="text-center border-right border-bottom text-white">Description</td>
<td class="border-bottom text-center text-white">Time</td>
<td class="border-bottom text-white text-right">
<i class="fa"></i>
</td>
</tr>
<tr id="headingTwo" data-toggle="collapse" data-target="#collapseTwo">
<td class="border-bottom b-green text-center text-white">Second</td>
<td class="text-center border-right border-bottom text-white">Desc</td>
<td class="border-bottom text-center text-white">Time</td>
<td class="border-bottom text-white text-right">
<i class="fa"></i>
</td>
</tr>
</tbody>
</table>
<div id="collapseOne" class="collapse show b-dark p-3 mt-0" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="text-white">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
<div id="collapseTwo" class="collapse show b-dark p-3 mt-0" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="text-white">
Another anotherprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
加油！在 <tbody> 之后不能有 <a></a> 之类的元素，除了 <tr> 之外。因此，您的 <a></a> 在 table!
并且由于您的 <a></a> 没有任何内容，因此呈现为隐藏！
您不必使用 <a><a> 作为折叠触发器。您可以使用任何 HTML 元素。你只需要用 data-toggle="collapse" 初始化它。由于它不是锚标记，因此它没有 href。不用担心。您可以改用 data-target="xx"。
HTML
<div id="accordion">
<div class="card">
<div class="card-header">
<table>
<tbody>
<tr id="headingOne" data-toggle="collapse" data-target="#collapseOne">
...
</tr>
</tbody>
</table>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
<div class="card">
<div class="card-header">...</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
<div class="card">
<div class="card-header">...</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body"> ... </div>
</div>
</div>
</div>
CSS (SASS)
您可以应用一点 CSS 使该行看起来像 link / 可点击。
#headingOne {
cursor: pointer;
color: var(--primary);
}
结果
演示： https://jsfiddle.net/davidliang2008/1t5gaf49/
更改插入符
我看到您还想在单击每个可折叠项后更改插入符号。只需 CSS 即可轻松完成此操作，因为当可折叠对象折叠时，bootstrap 会在其中添加 .collapsed class。您可以根据此更改 font-awesome 图标的内容以显示向左箭头或向下箭头。
HTML
<a class="collapsed" data-toggle="collapse">
Collapsible Group Item
<span class="float-right">
<i class="fa"></i>
</span>
</a>
CSS (SASS)
[data-toggle="collapse"] {
.fa:after {
content: '\f078'; /* chevron-down */
}
&.collapsed {
.fa:after {
content: '\f054'; /* chevron-right */
}
}
}