Question

我有一个使用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>

Answer 1

如果您使用现代浏览器，您可以像这样使用HTML5：

＆＃13;

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

＆＃13;

Answer 2

Pure HTML＆amp; 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>

Answer 3

基于以上答案，仅创建了一个嵌入了CSS和JS的HTML即可完成此类任务。 GitHub repo，该链接将保持有效，因为我没有计划删除它。

使用HTML和CSS的可折叠列表

3 个答案:

如果您使用现代浏览器，您可以像这样使用HTML5：