使用 HTML 和 CSS 的可折叠列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24977965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Collapsible lists using HTML and CSS
提问by user3881003
I have a collapsible list implemented using HTML and CSS. The list works properly, but I need a little modification.
我有一个使用 HTML 和 CSS 实现的可折叠列表。该列表工作正常，但我需要稍作修改。
Whenever I click an item in the list it expands. But as I click on another item in the same list, the previously expanded element gets collapsed while the clicked one gets expanded.
每当我单击列表中的一个项目时，它就会展开。但是当我单击同一列表中的另一个项目时，先前展开的元素会折叠起来，而单击的元素会展开。
Please help me to apply the behavior that makes it possible to expand multiple list items at the same time.
请帮助我应用可以同时展开多个列表项的行为。
I want it to be done in HTML and CSS only.
我希望它只在 HTML 和 CSS 中完成。
Here is the implementation I currently have. CSS styles:
这是我目前拥有的实现。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; } }
And the HTML markup:
和 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>
回答by Ananth
If you use a modern browser, you can just use HTML5 like this:
如果您使用现代浏览器，则可以像这样使用 HTML5：
<details>
<summary>See More</summary>
This text will be hidden if your browser supports it.
</details>回答by Roko C. Buljan
Pure HTML & CSS
A checkboxand it's :checkedstate sounds like a perfect match for your case:
纯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>回答by Leedehai
Based on the answers above, just created a single HTML with CSS and JS embedded for this kind of task. GitHub repo, the link will stay valid as I have no plan to remove it.
根据上面的答案，刚刚为此类任务创建了一个嵌入了 CSS 和 JS 的 HTML。 GitHub repo，该链接将保持有效，因为我不打算删除它。
