下载掌阅APP，畅读海量书库
立即打开
<details>元素通常和<summary>元素同时使用，注意这里的说法——“通常”，这是非常严谨的表述，因为<summary>元素缺省的时候浏览器会自动生成<summary>元素，并不会影响<details>元素的交互行为。此特性会在后面进一步详述，现在，我们先将精力放在<details>元素的常规应用上。
先看下面这段HTML代码：
上面的代码在浏览器中的效果如图3-1所示（样式会因浏览器厂商及版本的不同而有所差异，此效果仅供参考）。
图3-1 <details>元素默认展开的效果
上面的示例代码中出现了3个HTML元素和1个HTML属性，其中：
· <details>元素是整个交互的核心，即使没有设置<summary>元素，也可以通过切换open属性决定里面内容的显示与隐藏。
· <summary>元素表示摘要，是点击行为的触发源，也就是在默认情况下，我们通过点击<summary>元素来影响交互行为的发生。
· <p>元素在这里没有任何特殊的含义，可以换成任意的内容元素，甚至可以是纯文本，例如，下面的HTML结构也是合法的：
· open属性的存在与否决定了<details>元素是展开状态的还是收起状态的，在本例中，如果没有设置open属性，那么最终的样式效果会如图3-2所示，小三角图标朝右，只显示<summary>元素，其余内容均隐藏。
图3-2 <details>元素默认收起效果示意
最后，再看一下没有设置<summary>元素的样式效果，测试代码如下所示：
此时，在我的Chrome 117版本下会有如图3-3所示的效果，即浏览器自动生成了一个文案是“详情”（以前的文案是“详细信息”）的<summary>元素。
图3-3 没有设置<summary>元素的样式效果
然而，浏览器自动创建的<summary>元素是写在Shadow DOM（不了解的人可以参阅本书第10章内容）中的（如图3-4所示），外部的CSS无法改变其样式。
图3-4 <summary>元素写在Shadow DOM中的效果
因此，在实际开发中，如果你不希望出现<summary>元素，可以这么处理：自己写一个空的<summary>元素，然后设置其隐藏，就像下面这样。
对于上述HTML示例的实际渲染效果，大家可以通过在浏览器中输入地址https://www.htmlapi.cn/3/1-1.html或扫码访问来体验。