5
У меня есть сайт asp.net. По какой-то причине я не могу использовать javascript в своем коде. Я использую этот код для создания распорных таблиц:Свернуть элемент, когда развернуть только один элемент css
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, no JavaScript, поэтому у меня нет решения для этого.
Этот jsfiddle с встроенным css и нечитаемым html не является хорошим. Предоставьте jsfiddle, который воспроизводит вашу проблему и читается. Лично я бы использовал что-то вроде этого: http://webdesignerhut.com/create-pure-css-tabs/. – Senthe
не могли бы вы рассказать мне, как вы открываете этот div? –
@HarshSanghani: Этот div является боковой панелью и фиксирует положение слева от тела. –