HTML5 的<details>

来源:互联网 发布:ubuntu脚本输出一个数 编辑:程序博客网 时间:2024/05/16 08:03

最近在整一个网站的侧边栏:用到了HTML 5的<details>标签,以下是截图。

首先说一下<details>标签:

定义和用法

<details> 标签用于描述文档或文档某个部分的细节。


属性

new : HTML5 中的新属性。

属性值描述openopen定义 details 是否可见。
在HTML页面中,detail的用法:

<details open>...</details>表示“展开”

<details off>...</details>表示“收缩”


但是在js中,想要通过修改DOM树种的节点属性与以往的用法有点区别:

(details)element.open='open';  //表示"展开"

(details)element.open='';  //表示"收缩"


总结,在对open属性的介绍时,有句话非常重要:在默认情况下,不显示<details>中的内容

设置属性open='';就表示默认情况。



0 0