6.1 标签 <details>
HTML5 加入了 <details> 和 <summary> 元素，用于创建交互式下拉块。
这些元素可以让用户展开和收起内容，提升用户体验并节省网页空间。
<details> 元素用于创建可以展开或收起的块。在这个元素里面，你可以放置任何 HTML 内容。
当展开 <details> 时，嵌套的内容会显示出来，而收起时则会隐藏。
语法：
HTML
<details>
<summary>标题</summary>
<!-- 隐藏内容 -->
</details>
属性 open：
如果有这个属性，<details> 块默认会展开。
<details> 的使用示例
HTML
<details open>
<summary>主要信息</summary>
<p>这条信息默认是可见的，因为设置了 open 属性。</p>
</details>
解释
<details>: 创建一个用于隐藏内容的容器。<summary>: 定义始终可见的标题，点击它可以展开或收起内容。
6.2 标签 <summary>
<summary> 元素用于 <details> 中创建标题。这个标题始终可见，是用于控制块内容展开或收起的控件。
语法：
HTML
<details>
<summary>标题</summary>
<!-- 隐藏内容 -->
</details>
使用示例：
HTML
<details>
<summary>更多信息</summary>
<p>这是隐藏内容，展开块时会显示出来。</p>
</details>
使用 <details> 和 <summary> 的优势
- 提升用户体验: 用户可以自己选择他们想查看的内容。
- 节省空间: 将大量信息隐藏在交互式标题后面。
- 语义化标记: 改进 HTML 文档结构，提高其对用户和搜索引擎的访问性。
6.3 与 JavaScript 的交互
可以通过 JavaScript 控制 <details> 和 <summary> 元素来创建更具互动性的网页。
JavaScript 示例：
HTML
<details>
<summary>更多信息</summary>
<p>这是隐藏内容，展开块时会显示出来。</p>
</details>
<details open>
<summary>主要信息</summary>
<p>这条信息默认是可见的，因为设置了 open 属性。</p>
</details>
<button id="toggleDetails">收起/展开</button>
JavaScript
// 找到 id 为 'toggleDetails' 的按钮并添加 'click' 事件监听器
document.getElementById('toggleDetails').addEventListener('click', () => {
// 找到页面上的所有 'details' 元素
document.querySelectorAll('details').forEach(detail => {
// 反转每个 'details' 元素的 'open' 属性值
detail.open = !detail.open;
});
});
解释：
- 按钮 "收起/展开": 控制页面上所有
<details>元素的状态 - click 事件: 切换所有
<details>元素的 open 属性
GO TO FULL VERSION