5
私は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しか使用できないため、解決策はありません。
このjsfiddle inline cssと判読できないhtmlはいいです。あなたの問題を再現して読めるjsfiddleを提供してください。個人的に私はこのような何かを使用する：http://webdesignerhut.com/create-pure-css-tabs/。 – Senthe
あなたはその部門をどのように開いているか教えていただけますか？ –
@HarshSanghani：そのdivはサイドバーで、体の左の位置を固定します。 –