Question

我正在使用点击展开折叠，使用<details>和<summary>标记。它可以毫无问题地扩展和崩溃。我想只展开一次信息。

我的意思是，当我点击信息1它将展开，然后再次点击信息2。然后信息1崩溃，信息2扩大。这意味着只有一个人可以一次扩展。

如何仅使用css

来完成此操作

<details>
  <summary>Information1</summary>
    If your browser supports this element, it should allow
    you to expand and collapse these details.
</details>
<details>
   <summary>Information2</summary>
    If your browser supports this element, it should allow
    you to expand and collapse these details.
</details>
<details>
   <summary>Information3</summary>
    If your browser supports this element, it should allow
    you to expand and collapse these details.
 </details>
 <details>
    <summary>Information4</summary>
     If your browser supports this element, it should allow
     you to expand and collapse these details.
  </details>

https://fiddle.jshell.net/mjxhj5se/

谢谢..

Answer 1

您可以使用jQuery轻松完成此操作，这是最简单的教程Simple jQuery Accordion

Answer 2

单独使用css可能无法实现

。请看看;

Automatically close all the other <details> tags after opening a specific <details> tag

Answer 3

目前无法使用<details>和<summary>仅使用CSS，因为CSS无法操纵HTML元素的属性 - 在这种情况下，{{1} }属性。但是，如果您不需要使用open和<details>，solution链接的CasperSL可以很好地满足您的需要。

或者你可以添加这个jQuery来实现<summary>和<details>所需的效果：

＆＃13;

<summary>

＆＃13;

$("details").click(function(event) {
  $("details").not(this).removeAttr("open");
});

＆＃13;

单击展开详细信息和摘要标记

3 个答案: