使用HTML和CSS的可折叠列表
使用HTML和CSS的可折叠列表
提问于 2014-07-27 12:41:36
我有一个使用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>回答 2
Stack Overflow用户
发布于 2015-08-31 15:13:03
如果您使用的是现代浏览器，则可以像这样使用HTML5：
<details>
<summary>See More</summary>
This text will be hidden if your browser supports it.
</details>
可以在上找到更多关于MDN元素的信息，包括其他示例。
Stack Overflow用户
发布于 2018-07-11 06:35:07
基于上面的回答，我创建了一个嵌入了CSS和JS的HTML来完成这类任务。GitHub repo，链接将保持有效，因为我没有删除它的计划。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24977965
复制相关文章
相似问题
腾讯云开发者
