那些遇到过的问题

展开另一个元素时仅折叠元素css

Đồn*_*ọng 5 html css expand collapse jsfiddle

我有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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

完整代码在这里:https://jsfiddle.net/pdhung197/3eomjp3m/
但我想要更多:当我点击折叠元素时,该元素将被展开,其他元素将被折叠.
这个项目只能使用CSS,没有JavaScript,所以我没有办法解决这个问题.

Mos*_*Feu 4

技巧很简单。checkbox只需替换to的输入并 在所有的中radio添加具有相同值的属性nameinputs.

\n\n

这一变化意味着只有一个输入可以checked这一变化意味着同一时间因此，如果您单击其中一项，其余所有项目都将关闭。

\n\n

\r\n
\r\n
html, body, form {\r\n  margin: 0 auto;\r\n  padding: 0;\r\n  text-align: left;\r\n  height: 100%;\r\n  top: 0;\r\n  bottom: 0;\r\n  overflow: hidden;\r\n}\r\n\r\ntr:nth-child(even) {\r\n  background: #F5F5F5;\r\n}\r\n\r\ntr:nth-child(odd) {\r\n  background: #DCDCDC;\r\n}\r\n\r\ntr:hover\r\n{\r\n  background-color: #D3D3D3;\r\n}\r\n.toggle-box {\r\n  display: none;\r\n}\r\n\r\n[type="reset"] {\r\n  border: 0;\r\n  width: 100%;\r\n  text-align: inherit;\r\n  padding: 0;\r\n  font: inherit;\r\n  margin: 0;\r\n  outline:0 !important;\r\n}\r\n\r\n.toggle-box + label,\r\n[type="reset"]{\r\n  cursor: pointer;\r\n  display: block;\r\n  font-weight: bold;\r\n  line-height: 25px;\r\n  margin-bottom: 2px;\r\n  margin-left: 5px;\r\n  background-color: #F1F8FF;\r\n  border-bottom: 1px solid gray;\r\n}\r\n\r\n.toggle-box + label:hover {\r\n  background-color: #C5ECFF;\r\n}\r\n\r\n.toggle-box + label + button {\r\n  display:none;\r\n}\r\n\r\n.toggle-box:checked + label {\r\n  display:none;\r\n}\r\n\r\n.toggle-box:checked + label + button {\r\n  display:block;\r\n}\r\n\r\n.toggle-box + label + button + div {\r\n  display: none;\r\n  margin-bottom: 10px;\r\n  margin-left: 20px;\r\n}\r\n\r\n.toggle-box:checked + label + button + div {\r\n  display: block;\r\n}\r\n\r\n.toggle-box + label:before,\r\n[type="reset"]:before{\r\n  background-color: #66AEFF;\r\n  -webkit-border-radius: 15px;\r\n  -moz-border-radius: 15px;\r\n  border-radius: 15px;\r\n  color: #FFFFFF;\r\n  content: "+";\r\n  display: block;\r\n  float: left;\r\n  font-weight: bold;\r\n  height: 25px;\r\n  line-height: 25px;\r\n  margin-right: 5px;\r\n  text-align: center;\r\n  width: 25px;\r\n}\r\n\r\n.toggle-box:checked + label:before {\r\n  content: "\\2212";\r\n}\r\n#matru {\r\n  border: 0;\r\n  text-align: left;\r\n  position: absolute;\r\n  top: 100px;\r\n  left: 300px;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<form>\r\n  <div runat="server" id="sidebar" style="padding: 5px 0 0 5px;">\r\n    <input class=\'toggle-box\' id=\'header1\' type="radio" name="radio" /><label for=\'header1\'>Nguy\xe1\xbb\x85n V\xc4\x83n T\xc6\xb0</label>\r\n    <button type="reset">Nguy\xe1\xbb\x85n V\xc4\x83n T\xc6\xb0</button>\r\n    <div>\r\n      <table style=\'text-align: left; width: 100%; vertical-align: middle;\'>\r\n        <tr>\r\n          <td>T\xc3\xaan kh\xc3\xa1ch h\xc3\xa0ng</td>\r\n          <td>Nguy\xe1\xbb\x85n V\xc4\x83n T\xc6\xb0</td>\r\n        </tr>\r\n        <tr>\r\n          <td>M\xc3\xa3 kh\xc3\xa1ch h\xc3\xa0ng</td>\r\n          <td>PC06LL0191387</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Sery c\xc3\xb4ng t\xc6\xa1</td>\r\n          <td>14138734</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Ch\xe1\xbb\x89 s\xe1\xbb\x91 c\xc5\xa9</td>\r\n          <td>194.000</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Ch\xe1\xbb\x89 s\xe1\xbb\x91 m\xe1\xbb\x9bi</td>\r\n          <td>196.60</td>\r\n        </tr>\r\n        <tr>\r\n          <td>S\xe1\xba\xa3n l\xc6\xb0\xe1\xbb\xa3ng m\xe1\xbb\x9bi</td>\r\n          <td>2</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <input class=\'toggle-box\' id=\'header2\' type=\'radio\' name="radio" /><label for=\'header2\'>\xc4\x90Inh Th\xe1\xbb\x8b Tha</label>\r\n    <button type="reset">\xc4\x90Inh Th\xe1\xbb\x8b Tha</button>\r\n    <div>\r\n      <table style=\'text-align: left; width: 100%; vertical-align: middle;\'>\r\n        <tr>\r\n          <td>T\xc3\xaan kh\xc3\xa1ch h\xc3\xa0ng</td>\r\n          <td>\xc4\x90Inh Th\xe1\xbb\x8b Tha</td>\r\n        </tr>\r\n        <tr>\r\n          <td>M\xc3\xa3 kh\xc3\xa1ch h\xc3\xa0ng</td>\r\n          <td>PC06LL0182038</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Sery c\xc3\xb4ng t\xc6\xa1</td>\r\n          <td>14140069</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Ch\xe1\xbb\x89 s\xe1\xbb\x91 c\xc5\xa9</td>\r\n          <td>2050.000</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Ch\xe1\xbb\x89 s\xe1\xbb\x91 m\xe1\xbb\x9bi</td>\r\n          <td>2104.10</td>\r\n        </tr>\r\n        <tr>\r\n          <td>S\xe1\xba\xa3n l\xc6\xb0\xe1\xbb\xa3ng m\xe1\xbb\x9bi</td>\r\n          <td>54</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <input class=\'toggle-box\' id=\'header3\' type=\'radio\' name="radio" /><label for=\'header3\'>Nguy\xe1\xbb\x85n V\xc4\x83n Nh\xe1\xbb\xb1t</label>\r\n    <button type="reset">Nguy\xe1\xbb\x85n V\xc4\x83n Nh\xe1\xbb\xb1t</button>\r\n    <div>\r\n      <table style=\'text-align: left; width: 100%; vertical-align: middle;\'>\r\n        <tr>\r\n          <td>T\xc3\xaan kh\xc3\xa1ch h\xc3\xa0ng</td>\r\n          <td>Nguy\xe1\xbb\x85n V\xc4\x83n Nh\xe1\xbb\xb1t</td>\r\n        </tr>\r\n        <tr>\r\n          <td>M\xc3\xa3 kh\xc3\xa1ch h\xc3\xa0ng</td>\r\n          <td>PC06LL0190775</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Sery c\xc3\xb4ng t\xc6\xa1</td>\r\n          <td>14138746</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Ch\xe1\xbb\x89 s\xe1\xbb\x91 c\xc5\xa9</td>\r\n          <td>2699.000</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Ch\xe1\xbb\x89 s\xe1\xbb\x91 m\xe1\xbb\x9bi</td>\r\n          <td>2785.10</td>\r\n        </tr>\r\n        <tr>\r\n          <td>S\xe1\xba\xa3n l\xc6\xb0\xe1\xbb\xa3ng m\xe1\xbb\x9bi</td>\r\n          <td>86</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n    <input class=\'toggle-box\' id=\'header4\' type=\'radio\' name="radio" /><label for=\'header4\'>Mai V\xc4\x83n L\xc3\xbd</label>\r\n    <button type="reset">Mai V\xc4\x83n L\xc3\xbd</button>\r\n    <div>\r\n      <table style=\'text-align: left; width: 100%; vertical-align: middle;\'>\r\n        <tr>\r\n          <td>T\xc3\xaan kh\xc3\xa1ch h\xc3\xa0ng</td>\r\n          <td>Mai V\xc4\x83n L\xc3\xbd</td>\r\n        </tr>\r\n        <tr>\r\n          <td>M\xc3\xa3 kh\xc3\xa1ch h\xc3\xa0ng</td>\r\n          <td>PC06LL0182035</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Sery c\xc3\xb4ng t\xc6\xa1</td>\r\n          <td>14138744</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Ch\xe1\xbb\x89 s\xe1\xbb\x91 c\xc5\xa9</td>\r\n          <td>2581.000</td>\r\n        </tr>\r\n        <tr>\r\n          <td>Ch\xe1\xbb\x89 s\xe1\xbb\x91 m\xe1\xbb\x9bi</td>\r\n          <td>2631.70</td>\r\n        </tr>\r\n        <tr>\r\n          <td>S\xe1\xba\xa3n l\xc6\xb0\xe1\xbb\xa3ng m\xe1\xbb\x9bi</td>\r\n          <td>50</td>\r\n        </tr>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</form>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

http://jsbin.com/pefobi

\n\n

注意：如果您需要第二次单击将再次关闭选项卡，则必须将所有内容都用form标签包裹起来。

\n

归档时间：

查看次数：

684 次

最近记录：

10 年，9 月 前
相关归档
如何按类查找元素 344
你能在<span>中找到<span>吗？ 170
滚动子div滚动窗口,我该如何阻止？ 89
选中时从HTML文本输入中删除蓝色光晕 71
使用CSS的圆圈中的文本段落 24
正确渲染最初隐藏的HTML元素的方法 22
HTML - 更改select标签上的最大行数 21
justify-content:space-between无法按预期对齐元素 17
div如何横向和纵向居中？ 16
Bootstrap DropDown菜单:删除滚动条 5
难疑归档
如何水平居中<div>？ 4116
如何显示已上演的更改？ 2034
如何更改一个特定提交的提交作者？ 1949
单击div到底层元素 1500
Python的隐藏功能 1419
对JavaScript对象数组进行排序 1233
六角透明的颜色 1219
使用Twitter Bootstrap 3将列居中 1109
如何查看运行我的脚本的Python版本？ 1099
在Ruby on Rails中对nil v.空v.空白的简要解释 1098