如何解决如何为手风琴表添加折叠向上/向下图标
我正在尝试开发一个手风琴表来显示结果。但是我对设计不满意，并试图向表格行添加折叠箭头以指示存在嵌套表格。不幸的是它不起作用。我可以知道如何通过下面的代码 snipneet 来添加它
$('.accordion-toggle').click(function() {
$('.hiddenRow').hide();
$(this).next('tr').find('.hiddenRow').show();
});body {
background-color: #004C70 !important;
}
.table tr {
cursor: pointer;
}
.table {
background-color: #fff !important;
}
.hedding h1 {
color: #fff;
font-size: 25px;
}
.main-section {
margin-top: 120px;
}
.hiddenRow {
padding: 0 4px !important;
background-color: #eeeeee;
font-size: 13px;
}
.accordian-body span {
color: #a2a2a2 !important;
}<!DOCTYPE html>
<html>
<head>
<title> Table Row Toggel </title>
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
body{
background-color:#004C70 !important;
}
.table tr {
cursor: pointer;
}
.table{
background-color: #fff !important;
}
.hedding h1{
color:#fff;
font-size:25px;
}
.main-section{
margin-top: 120px;
}
.hiddenRow {
padding: 0 4px !important;
background-color: #eeeeee;
font-size: 13px;
}
.accordian-body span{
color:#a2a2a2 !important;
}
</style>
<body>
<div class="container main-section">
<div class="row">
<div class="col-lg-12 hedding pb-2">
<h1> TEsting </h1>
</div>
<div class="col-lg-12">
<table class="table table-bordered" style="border-collapse:collapse;">
<thead>
<th>Testing</th>
<tr>
<th>Activity</th>
<th>Time</th>
<th>Status</th>
<th>Corrective Measure</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr colspan="6" data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td>1</td>
<td>12 Jan 2018</td>
<td>Good</td>
<td>$150.00</td>
<td> - </td>
</tr>
<tr class="p">
<td colspan="6" class="hiddenRow">
<div class="accordian-body collapse p-3" id="demo1">
<p>No : <span>1</span></p>
<p>Date : <span>12 Jan 2018</span> </p>
<p>Description : <span>Good</span> </p>
<p>Credit : <span>$150.00</span> </p>
<p>Debit : <span></span></p>
<p>Balance : <span>$150.00</span></p>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
<td>2</td>
<td>12 Jan 2018</td>
<td>Good</td>
<td>$11.00</td>
<td> - </td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div id="demo2" class="accordian-body collapse p-3">
<p>No : <span>2</span></p>
<p>Date : <span>12 Jan 2018</span> </p>
<p>Description : <span>Good</span> </p>
<p>Credit : <span>$150.00</span> </p>
<p>Debit : <span></span></p>
<p>Balance : <span>$150.00</span></p>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
<td>3</td>
<td>12 Jan 2018</td>
<td>Good</td>
<td>$500.00</td>
<td> - </td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div id="demo3" class="accordian-body collapse p-3">
<p>No : <span>3</span></p>
<p>Date : <span>12 Jan 2018</span> </p>
<p>Description : <span>Good</span> </p>
<p>Credit : <span>$150.00</span> </p>
<p>Debit : <span></span></p>
<p>Balance : <span>$150.00</span></p>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo4" class="accordion-toggle">
<td>4</td>
<td>12 Jan 2018</td>
<td>Good</td>
<td>$500.00</td>
<td> - </td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div id="demo4" class="accordian-body collapse p-3">
<p>No : <span>4</span></p>
<p>Date : <span>12 Jan 2018</span> </p>
<p>Description : <span>Good</span> </p>
<p>Credit : <span>$150.00</span> </p>
<p>Debit : <span></span></p>
<p>Balance : <span>$150.00</span></p>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo5" class="accordion-toggle">
<td>5</td>
<td>12 Jan 2018</td>
<td>Good</td>
<td>$500.00</td>
<td> - </td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div id="demo5" class="accordian-body collapse p-3">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script>
$('.accordion-toggle').click(function(){
$('.hiddenRow').hide();
$(this).next('tr').find('.hiddenRow').show();
});
</script>
</body>
</html>解决方法
添加几个图标并根据行的 .collapsed 状态隐藏/显示它们。
例如：
<style>
...
tr.collapsed .icon-arrow-down { display: none; }
tr:not(.collapsed) .icon-arrow-up { display: none; }
</style>
<tr ...>
<td>
<i class="icon-arrow-down"></i>
<i class="icon-arrow-up"></i>
</td>
...
</tr>
我会使用“CSS 之前”或“CSS 之后”伪元素为每一行创建箭头，类为 accordion-toggle，因此您不需要导入任何图标或库。
我编辑了您的 CSS 并在其末尾添加了伪元素，但您可能应该处理箭头的设计和定位。
$('.accordion-toggle').click(function() {
$('.hiddenRow').hide();
$(this).next('tr').find('.hiddenRow').show();
});body {
background-color: #004C70 !important;
}
.table tr {
cursor: pointer;
}
.table {
background-color: #fff !important;
}
.hedding h1 {
color: #fff;
font-size: 25px;
}
.main-section {
margin-top: 120px;
}
.hiddenRow {
padding: 0 4px !important;
background-color: #eeeeee;
font-size: 13px;
}
.accordian-body span {
color: #a2a2a2 !important;
}
.accordion-toggle::before {
content:'';
position: absolute;
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
right: 1.5em;
margin-top: 1.5em
}<!DOCTYPE html>
<html>
<head>
<title> Table Row Toggel </title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
body{
background-color:#004C70 !important;
}
.table tr {
cursor: pointer;
}
.table{
background-color: #fff !important;
}
.hedding h1{
color:#fff;
font-size:25px;
}
.main-section{
margin-top: 120px;
}
.hiddenRow {
padding: 0 4px !important;
background-color: #eeeeee;
font-size: 13px;
}
.accordian-body span{
color:#a2a2a2 !important;
}
</style>
<body>
<div class="container main-section">
<div class="row">
<div class="col-lg-12 hedding pb-2">
<h1> TEsting </h1>
</div>
<div class="col-lg-12">
<table class="table table-bordered" style="border-collapse:collapse;">
<thead>
<th>Testing</th>
<tr>
<th>Activity</th>
<th>Time</th>
<th>Status</th>
<th>Corrective Measure</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr colspan="6" data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td>1</td>
<td>12 Jan 2018</td>
<td>Good</td>
<td>$150.00</td>
<td> - </td>
</tr>
<tr class="p">
<td colspan="6" class="hiddenRow">
<div class="accordian-body collapse p-3" id="demo1">
<p>No : <span>1</span></p>
<p>Date : <span>12 Jan 2018</span> </p>
<p>Description : <span>Good</span> </p>
<p>Credit : <span>$150.00</span> </p>
<p>Debit : <span></span></p>
<p>Balance : <span>$150.00</span></p>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
<td>2</td>
<td>12 Jan 2018</td>
<td>Good</td>
<td>$11.00</td>
<td> - </td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div id="demo2" class="accordian-body collapse p-3">
<p>No : <span>2</span></p>
<p>Date : <span>12 Jan 2018</span> </p>
<p>Description : <span>Good</span> </p>
<p>Credit : <span>$150.00</span> </p>
<p>Debit : <span></span></p>
<p>Balance : <span>$150.00</span></p>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
<td>3</td>
<td>12 Jan 2018</td>
<td>Good</td>
<td>$500.00</td>
<td> - </td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div id="demo3" class="accordian-body collapse p-3">
<p>No : <span>3</span></p>
<p>Date : <span>12 Jan 2018</span> </p>
<p>Description : <span>Good</span> </p>
<p>Credit : <span>$150.00</span> </p>
<p>Debit : <span></span></p>
<p>Balance : <span>$150.00</span></p>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo4" class="accordion-toggle">
<td>4</td>
<td>12 Jan 2018</td>
<td>Good</td>
<td>$500.00</td>
<td> - </td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div id="demo4" class="accordian-body collapse p-3">
<p>No : <span>4</span></p>
<p>Date : <span>12 Jan 2018</span> </p>
<p>Description : <span>Good</span> </p>
<p>Credit : <span>$150.00</span> </p>
<p>Debit : <span></span></p>
<p>Balance : <span>$150.00</span></p>
</div>
</td>
</tr>
<tr data-toggle="collapse" data-target="#demo5" class="accordion-toggle">
<td>5</td>
<td>12 Jan 2018</td>
<td>Good</td>
<td>$500.00</td>
<td> - </td>
</tr>
<tr>
<td colspan="6" class="hiddenRow">
<div id="demo5" class="accordian-body collapse p-3">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script>
$('.accordion-toggle').click(function(){
$('.hiddenRow').hide();
$(this).next('tr').find('.hiddenRow').show();
});
</script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
