HTML5 标签

html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。

 

 

用法

一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。

 

其大致写法如下：

 

 

<details>

<summary>google nexus 6</summary>

<p>商品详情：</p>

<dl>

<dt>屏幕</dt>

<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>

<dt>电池</dt>

<dd>3220 mah</dd>

<dt>相机</dt>

<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>

<dt>处理器</dt>

<dd>qualcomm® snapdragon™ 805 processor</dd>

</dl>

</details>

首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的html元素作为详情内容，这些内容需要在点击<summary>才会呈现。

 

上面代码呈现出来的效果会是下面这样的：

 

html5 details tag

 

最开始详情是隐藏的，当点击时都会展现。

 

 

open 属性

当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。

 

 

<details open>

<summary>google nexus 6</summary>

<p>商品详情：</p>

<dl>

<dt>屏幕</dt>

<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>

<dt>电池</dt>

<dd>3220 mah</dd>

<dt>相机</dt>

<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>

<dt>处理器</dt>

<dd>qualcomm® snapdragon™ 805 processor</dd>

</dl>

</details>

此时默认会把详情展开，而点击标题后会折叠起来。