summary+details玩转网页折叠效果，实例教学手把手教你用

例如：

<details>
  <summary>问题 1: 什么是 HTML?</summary>
  <p>HTML (HyperText Markup Language) 是一种用于创建网页的标准标记语言。</p>
</details>

<details>
  <summary>问题 2: 什么是 CSS?</summary>
  <p>CSS (Cascading Style Sheets) 是一种用于描述 HTML 元素样式的语言。</p>
</details>

<details>
  <summary>问题 3: 什么是 JavaScript?</summary>
  <p>JavaScript 是一种用于使网页具有交互性的脚本语言。</p>
</details>

这个例子创建了三个可折叠的问题，每个问题都有自己的答案。要实现手风琴效果（即点击一个问题时，其他问题自动关闭），你需要使用 JavaScript：

const details = document.querySelectorAll("details");

details.forEach((detail) => {
  detail.addEventListener("toggle", (event) => {
    if (detail.open) {
      details.forEach((otherDetail) => {
        if (otherDetail !== detail) {
          otherDetail.open = false;
        }
      });
    }
  });
});

这段 JavaScript 代码监听每个

<details>
  <summary>
    <img src="question_mark.png" alt="Question Mark" width="20">
    <span>关于我们</span>
  </summary>
  <p>我们是一家致力于提供优质服务的公司...</p>
</details>

<details>
  <summary>相关链接</summary>
  <p>
    <a href="#">了解更多</a>
  </p>
</details>

details > summary {
  list-style: none; /* 移除默认箭头 */
}

details > summary::before {
  content: '▶'; /* 使用 Unicode 字符作为展开/折叠指示器 */
  display: inline-block;
  width: 1em;
  transition: transform 0.3s ease;
}

details[open] > summary::before {
  transform: rotate(90deg); /* 展开时旋转箭头 */
}

details > summary::marker {
  content: url(custom_arrow.png); /* 使用图片作为展开/折叠指示器 */
}