3.3.1  常用属性

3.3.1 常用属性

<details>元素的常用属性如下。

■open：值为open，功能是定义<details>是否可见。

■subject：值为sub_id，功能是设置元素所对应项目的ID号。

■draggable：值为true或false，功能是设置是否可以拖动元素，默认值是false。

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

下面通过一个实例讲解使用<details>标记元素实现交互的方法。

实例文件3.html的代码如下。

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

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

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

图3-3 执行效果

图3-4 消失部分内容