腾讯云·社区
如何使用HTML和CSS的可折叠列表？内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
- 回答 (2)
- 关注 (0)
- 查看 (1886)
我有一个使用HTML和CSS实现的可折叠列表。这个列表正常工作，但我需要稍微修改一下。
每当我单击列表中的某个项目时，它就会展开。但是，当我单击同一列表中的另一项时，先前展开的元素将被折叠，而单击的元素将被展开。
请帮助我应用该行为，使你可以同时展开多个列表项。
我希望它只在HTML和CSS中完成。
以下是我目前的实现。CSS样式：
.row { vertical-align: top; height: auto !important; }
list { display: none; }
.show { display: none; }
.hide:target + .show { display: inline; }
.hide:target { display: none; }
.hide:target ~ .list { display:inline; }
@media print { .hide, .show { display: none; } }和HTML标记：
<div class="row">
<a href="#hide1" class="hide" id="hide1">Expand</a>
<a href="#show1" class="show" id="show1">Collapse</a>
<div class="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>如果使用现代浏览器，只需使用HTML 5，如下所示：
<details> <summary>See More</summary> This text will be hidden if your browser supports it. </details>
纯HTML和CSS
一个复选框而且是.:checked看起来很适合你的情况：
[id^="togList"], /* HIDE CHECKBOX */
[id^="togList"] ~ .list, /* HIDE LIST */
[id^="togList"] + label span + span, /* HIDE "Collapse" */
[id^="togList"]:checked + label span{ /* HIDE "Expand" (IF CHECKED) */
display:none;
}
[id^="togList"]:checked + label span + span{
display:inline-block; /* SHOW "Collapse" (IF CHECKED) */
}
[id^="togList"]:checked ~ .list{
display:block; /* SHOW LIST (IF CHECKED) */
}<div class="row">
<input id="togList1" type="checkbox">
<label for="togList1">
<span>Expand</span>
<span>Collapse</span>
</label>
<div class="list">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
CSS云+社区
扫码关注云+社区
领取腾讯云代金券