html文字折叠

文字折叠的实现方式

使用HTML <details> 和 <summary>

HTML5 提供了 <details> 标签用于包裹可折叠内容，<summary> 标签定义折叠区域的标题。

示例：

<details>
  <summary>点击展开</summary>
  <div>这是折叠的内容，点击摘要区域可展开或收起。</div>
</details>

特点：

• 纯HTML实现,无需额外脚本。
• 默认样式为带下划线的标题,可通过CSS自定义样式。
• 兼容性：现代浏览器支持，部分老旧浏览器（如IE）可能不兼容。

---

通过CSS控制显示与隐藏

利用CSS的:target选择器或checkbox hack实现伪折叠效果。

示例（基于Checkbox）：

<label class="toggle">点击展开
  <input type="checkbox" class="fold-input">
</label>
<div class="content">这是折叠的内容。</div>

CSS：

.content {
  display: none;
}
.fold-input:checked ~ .content {
  display: block;
}

特点：

• 依赖CSS状态控制,无动态交互。
• 适合静态页面,无法实现复杂逻辑。

---

使用JavaScript动态控制

通过监听点击事件,动态切换内容的display属性或CSS类。

示例（纯JS）：

<button id="toggleBtn">展开</button>
<div id="foldContent" style="display: none;">这是折叠内容。</div>
<script>
  const btn = document.getElementById('toggleBtn');
  const content = document.getElementById('foldContent');
  btn.addEventListener('click', () => {
    if (content.style.display === 'none') {
      content.style.display = 'block';
      btn.textContent = '收起';
    } else {
      content.style.display = 'none';
      btn.textContent = '展开';
    }
  });
</script>

特点：

• 灵活性高,可扩展复杂交互（如动画、AJAX加载）。
• 需手动处理状态切换和兼容性。

---

方法对比表

方法	动态交互	浏览器兼容性	代码复杂度	适用场景
<details>	低	现代浏览器	极低	简单静态折叠
CSS :target	无	现代浏览器	低	锚点跳转式折叠
JavaScript	高	全浏览器	中	复杂交互或动态内容

---

常见问题与解答

问题1：如何让 <details> 默认展开？

解答：
在<details>标签中添加open属性即可：

<details open>
  <summary>点击收起</summary>
  <div>默认展开的内容。</div>
</details>

---

问题2：如何为折叠按钮添加图标（如）？

解答：
通过CSS伪元素或直接修改按钮内容实现：
示例（纯CSS）：

<button class="toggle-btn">展开 <span class="icon"></span></button>
<div class="content">内容</div>

.toggle-btn {
  position: relative;
}
.icon::after {
  content: '▼';
  margin-left: 5px;
}
.content {
  display: none;
}
.toggle-btn.active .icon::after {
  content: '▲';
}

配合JS切换.active类：

document.querySelector('.toggle-btn').addEventListener('click', () => {
  document.querySelector('.content').style.display = 
    document.querySelector('.content').style.display === 'none' ? 'block' : 'none';
  document.querySelector('.toggle-btn').classList.toggle('active');