我有一个可折叠的列表实现使用
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>
解决方法
如果您使用现代浏览器,则可以像这样使用HTML5：
<details> <summary>See More</summary> This text will be hidden if your browser supports it. </details>