《HTML5开发手册》——2.3 初学者“菜谱”：使用details元素创建可伸缩控件

本节书摘来自异步社区《HTML5开发手册》一书中的第2章，第2.3节,作者： 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3　初学者“菜谱”：使用details元素创建可伸缩控件

在本书撰写时，只有Chrome 13+支持新的details元素。但愿其他浏览器能尽快支持它。

利用details元素能够在无需任何JavaScript和/或CSS的情况下，创建交互式展开/收缩的开关效果。在其中使用summary元素还可以创建内容的概述信息。

details有一个可选属性：open。若其为真，内容默认为展开样式；反之则为收缩样式，显示summary内容。Summary是一个可点击的部分，用以控制内容的展开与收缩。

图2.3显示了一个简要的作者自传，在默认情况下，顶上的details为展开状态。详细代码见代码2.3。

https://yqfile.alicdn.com/dac9a822cc9a69357ff3b801b597e12d468b0923.png" >

代码2.3　details元素应用实例

https://yqfile.alicdn.com/1e0b137c85f4329fc0d35ee1682bd8e250592bfd.png" >

下面是另外一个利用details显示、隐藏目录的例子。根据页面样式和内容多少，将目录始终显示于页面顶部是很有用的。用户可以点击展开它，然后跳转到页面中的其他章节。代码2.4演示了这种效果，其中details元素默认为收缩样式。

代码2.4　创建可伸缩的目录