本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.5节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5 使用< details >标记元素实现交互

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

实例说明

< details >标记是一个全新的HTML 5元素，功能是描述文档或文档某个部分的细节。< details >标记经常与< summary >元素配合使用。在默认情况下，不显示< details >标记中的内容。当与< summary >标记配合使用时，在单击< summary >标记后才会显示< details >元素中设置的内容。< details >元素的常用属性如下所示。

• open：值为open，功能是定义details是否可见。
• subject：值为sub_id，功能是设置元素所对应项目的ID号。
• draggable：值为true或false，功能是设置是否可以拖动元素，默认值是false。

< details >标记本质上允许我们在单击标签时显示和隐藏内容。但是直到现在，这种效果还一直是用JavaScript实现的。假如在某个头部元素后面有一个箭头，当单击箭头时，下面的附加信息将会呈现；再次单击箭头后内容消失。在FAQ（在线问答）页面中经常使用这个功能。

具体实现

使用Dreamweaver创建一个名为“005.html”的文件，具体代码如下所示：

    　隐藏　
    
     　生成于 2012-05-17　
    
　显示　
    
     　生成于 2012-05-17　
    

在上述代码中，在页面中使用了一个< details >元素，通过不设置该元素的open属性值与设置该属性值为“open”进行比较，并将结果展示在页面中。在本实例中，为了能更好地验证< details >元素的“open”属性，在页面的样式中分别定义了该元素的默认样式和显示状态的样式。其中第一个< details >使用的默认样式，第二个使用“open”。

执行后的效果如图1-6所示。

如果单击图1-6中“ 详细信息 ”前面的小三角符号，则这部分内容将会消失，如图1-7所示。

本书在写作时，只有谷歌的Chrome浏览器支持上述< details >的功能。例如，在Fiefox中不会显示小三角符号，如图1-8所示。