我有一个asp.net网站。由于某些原因,我无法在我的代码中使用JavaScript。我使用以下代码来创建可扩展表格:
html, body, form {
margin: 0 auto;
padding: 0;
text-align: left;
height: 100%;
top: 0;
bottom: 0;
overflow: hidden;
}
tr:nth-child(even) {
background: #F5F5F5;
}
tr:nth-child(odd) {
background: #DCDCDC;
}
tr:hover
{
background-color: #D3D3D3;
}
.toggle-box {
display: none;
}
.toggle-box + label {
cursor: pointer;
display: block;
font-weight: bold;
line-height: 25px;
margin-bottom: 2px;
margin-left: 5px;
background-color: #F1F8FF;
border-bottom: 1px solid gray;
}
.toggle-box + label:hover {
background-color: #C5ECFF;
}
.toggle-box + label + div {
display: none;
margin-bottom: 10px;
margin-left: 20px;
}
.toggle-box:checked + label + div {
display: block;
}
.toggle-box + label:before {
background-color: #66AEFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
color: #FFFFFF;
content: "+";
display: block;
float: left;
font-weight: bold;
height: 25px;
line-height: 25px;
margin-right: 5px;
text-align: center;
width: 25px;
}
.toggle-box:checked + label:before {
content: "\2212";
}
#matru {
border: 0;
text-align: left;
position: absolute;
top: 100px;
left: 300px;
}
<div runat="server" id="sidebar" style="padding: 5px 0 0 5px;">
<input class='toggle-box' id='header1' type='checkbox' /><label for='header1'>Nguyễn Văn Tư</label><div>
<table style='text-align: left; width: 100%; vertical-align: middle;'>
<tr>
<td>Tên khách hàng</td>
<td>Nguyễn Văn Tư</td>
</tr>
<tr>
<td>Mã khách hàng</td>
<td>PC06LL0191387</td>
</tr>
<tr>
<td>Sery công tơ</td>
<td>14138734</td>
</tr>
<tr>
<td>Chỉ số cũ</td>
<td>194.000</td>
</tr>
<tr>
<td>Chỉ số mới</td>
<td>196.60</td>
</tr>
<tr>
<td>Sản lượng mới</td>
<td>2</td>
</tr>
</table>
</div>
<input class='toggle-box' id='header2' type='checkbox' /><label for='header2'>ĐInh Thị Tha</label><div>
<table style='text-align: left; width: 100%; vertical-align: middle;'>
<tr>
<td>Tên khách hàng</td>
<td>ĐInh Thị Tha</td>
</tr>
<tr>
<td>Mã khách hàng</td>
<td>PC06LL0182038</td>
</tr>
<tr>
<td>Sery công tơ</td>
<td>14140069</td>
</tr>
<tr>
<td>Chỉ số cũ</td>
<td>2050.000</td>
</tr>
<tr>
<td>Chỉ số mới</td>
<td>2104.10</td>
</tr>
<tr>
<td>Sản lượng mới</td>
<td>54</td>
</tr>
</table>
</div>
<input class='toggle-box' id='header3' type='checkbox' /><label for='header3'>Nguyễn Văn Nhựt</label><div>
<table style='text-align: left; width: 100%; vertical-align: middle;'>
<tr>
<td>Tên khách hàng</td>
<td>Nguyễn Văn Nhựt</td>
</tr>
<tr>
<td>Mã khách hàng</td>
<td>PC06LL0190775</td>
</tr>
<tr>
<td>Sery công tơ</td>
<td>14138746</td>
</tr>
<tr>
<td>Chỉ số cũ</td>
<td>2699.000</td>
</tr>
<tr>
<td>Chỉ số mới</td>
<td>2785.10</td>
</tr>
<tr>
<td>Sản lượng mới</td>
<td>86</td>
</tr>
</table>
</div>
<input class='toggle-box' id='header4' type='checkbox' /><label for='header4'>Mai Văn Lý</label><div>
<table style='text-align: left; width: 100%; vertical-align: middle;'>
<tr>
<td>Tên khách hàng</td>
<td>Mai Văn Lý</td>
</tr>
<tr>
<td>Mã khách hàng</td>
<td>PC06LL0182035</td>
</tr>
<tr>
<td>Sery công tơ</td>
<td>14138744</td>
</tr>
<tr>
<td>Chỉ số cũ</td>
<td>2581.000</td>
</tr>
<tr>
<td>Chỉ số mới</td>
<td>2631.70</td>
</tr>
<tr>
<td>Sản lượng mới</td>
<td>50</td>
</tr>
</table>
</div>
</div>
完整代码在此:https://jsfiddle.net/pdhung197/3eomjp3m/
但我想要更多:当我点击一个折叠的元素时,该元素将被展开,其他元素将会折叠。
这个项目只能使用 CSS,没有 JavaScript,所以我没有解决方法。