本节书摘来自异步社区《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。
代码2.3 details元素应用实例
下面是另外一个利用details显示、隐藏目录的例子。根据页面样式和内容多少,将目录始终显示于页面顶部是很有用的。用户可以点击展开它,然后跳转到页面中的其他章节。代码2.4演示了这种效果,其中details元素默认为收缩样式。
代码2.4 创建可伸缩的目录
![6c323af05220614591f0714f349a40610049fb1b](https://i-blog.csdnimg.cn/blog_migrate/f10e0a020c7f5748ffc6362741a19679.png)