html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。
( Q. [4 W7 |" }3 o* D用法
6 I, s/ A. H# u, A" y一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。. E# O1 b/ A1 i: K' P7 r& w3 U
其大致写法如下：0 W( s/ q. E* H7 p$ W+ A! {" Z4 S2 n
<details>
7 M* v) N6 [% q# q1 I<summary>google nexus 6</summary/ @4 A' Q4 h2 j. l
<p>商品详情：</p>7 p1 L6 H, e# X' b' h
<dl>
; u: G8 `! ?4 L) A6 I, x<dt>屏幕</dt>
% o) z. [9 P& t+ F<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
, }& X' n% |4 U8 p) A |0 W<dt>电池</dt>& ]6 B* T$ j; }0 v% z, X: O5 i6 m
<dd>3220 mah</dd>
N' [" B4 p1 H5 ?' s<dt>相机</dt>
; O. a. v9 a1 c; b$ n<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>5 q/ S) r2 }2 d# p$ l# V* v
<dt>处理器</dt>
- _ E7 z8 o* A" c6 |) L6 H<dd>qualcomm? snapdragon™ 805 processor</dd>" _- G, O; l4 [3 y
</dl>. G+ u- l6 B/ k/ h+ M; p8 o
</details>
4 `' k8 L A8 f) o- l3 l% W& M首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的html元素作为详情内容，这些内容需要在点击<summary>才会呈现。/ Y, o9 _6 u( K8 V2 x! ~
上面代码呈现出来的效果会是下面这样的：
0 n8 x6 [5 D. R; _, \, e4 C' M& Z& y x0 K6 w
html5 <details> 标签 三联( F; S* U/ p' O$ x9 }
最开始详情是隐藏的，当点击时都会展现。
8 k% a; e2 r& b" K' ~! f- Popen 属性
, y/ b3 \( T4 ~9 v当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。* l! B5 E3 Z0 B
<details open>
+ |6 V7 m" [! ]6 r. v9 y I" q<summary>google nexus 6</summary>/ i) ~7 O! Z8 h+ C# H( k( U
<p>商品详情：</p>/ l5 t7 v/ V0 q8 |. j& f
<dl>* u I! x. g& B+ f' Q+ f; O9 U: N
<dt>屏幕</dt>
- g# d" R) b' i/ X5 T; ^0 g<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
9 u! D& { O& D# W# W<dt>电池</dt>
; A \, r( y# C: d1 L<dd>3220 mah</dd>
5 m$ v0 X8 a1 Z; f6 x<dt>相机</dt>8 \1 Q X# J$ H: T2 v7 M# q2 \
<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>
+ l: |/ E6 i2 T4 F4 h<dt>处理器</dt>4 V3 x0 U" r4 ]. A/ I% H- Q; Y
<dd>qualcomm? snapdragon™ 805 processor</dd>
8 \8 n# O+ `; B9 }$ o) E" z1 w, P</dl>
/ [- J$ O' T9 C/ l& M& ]</details>
: h8 a9 w: [2 C) h* p- n3 a: |% j此时默认会把详情展开，而点击标题后会折叠起来。
1 u! j/ q# t1 c! A示例
7 d8 C" ]' Z/ [! m" E( d示例如上面那样，预览在线版本可点击此处。
) L3 j& U$ `! C- g2 u浏览器兼容性
z: w7 _& b4 ]7 V由于是html5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅chrome, safari 8+ 和opera 26+支持此标签。
( P+ g( [& a2 z; w7 N* J5 [ D可喜的是，如果你在caniuse开启了「显示来自uc浏览器的结果」 选项的话，会发现，国产的uc浏览器也支持了此标签。
1 `# X6 {# T& f. }; H3 V. e& c5 a9 H( L5 \* i* G
+ j" E% k0 l" W2 _2 y1 m
更多网页制作信息请查看： 网页制作 |
|
/ X2 L: F9 Q( U, R" ]& B
& M2 ?+ A: D" W7 i% N
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
