1.5 使用< details >标记元素实现交互
实例说明
< 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”的文件，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>交互元素<details>的使用</title>
<style type="text/css">
body{
font-size:12px
}
span{
font-weight:bold
}
details {
overflow: hidden;
height: 0;
padding-left:200px;
position: relative;
display: block;
}
details[open] {
height:auto;
}
</style>
</head>
<body>
<span>隐藏</span>
<details>
生成于 2012-05-17
</details>
<span>显示</span>
<details open="open">
生成于 2012-05-17
</details>
</body>
</html>
在上述代码中，在页面中使用了一个< details >元素，通过不设置该元素的open属性值与设置该属性值为“open”进行比较，并将结果展示在页面中。在本实例中，为了能更好地验证< details >元素的“open”属性，在页面的样式中分别定义了该元素的默认样式和显示状态的样式。其中第一个< details >使用的默认样式，第二个使用“open”。
执行后的效果如图1-6所示。
如果单击图1-6中“ 详细信息 ”前面的小三角符号，则这部分内容将会消失，如图1-7所示。
本书在写作时，只有谷歌的Chrome浏览器支持上述< details >的功能。例如，在Fiefox中不会显示小三角符号，如图1-8所示。
时间： 2024-10-02 12:10:33