使用HTML和CSS的可折叠列表

本文介绍了使用HTML和CSS的可折叠列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个可折叠的列表实现使用HTML和CSS。该列表工作正常，但我需要一点修改。

I have a collapsible list implemented using HTML and CSS. The list works properly, but I need a little modification.

每当我点击列表中的项目，它会展开。但是当我点击同一个列表中的另一个项目时，以前展开的元素会被折叠，而点击的元素会展开。

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.

我希望只能在HTML和CSS中完成。

I want it to be done in HTML and CSS only.

这里是我目前的实现。 CSS样式：

Here is the implementation I currently have. CSS styles:

.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像这样：

If you use a modern browser, you can just use HTML5 like this:

<details>
  <summary>See More</summary>
  This text will be hidden if your browser supports it.
</details>

这篇关于使用HTML和CSS的可折叠列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！