html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。
; ~& ]7 y+ i' }- ?用法
/ W- p# O @ X! v3 `5 g- s一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。! P% [# ]) u4 P* y: {$ _1 a
其大致写法如下：
4 a# Y8 o; C4 X. _: {& m4 H<details>
4 \5 Y: t4 {+ h1 W6 z<summary>google nexus 6</summary- A6 r. B3 w( p" J
<p>商品详情：</p>
# o% P2 v$ N/ c- X" a" L- R<dl>0 i1 j. r( X1 @5 l/ ]0 F6 ~
<dt>屏幕</dt>
j. V' J8 y# O/ [1 W<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>" S( F5 k# W4 s* A/ T: M
<dt>电池</dt>) d) B$ G. H" X- B6 f: n* D
<dd>3220 mah</dd>
# u3 Y' l( J: ]3 o, _7 u. }<dt>相机</dt>
4 x3 S. t% W0 l; l<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>. \' F0 s! ?- y5 C
<dt>处理器</dt>
1 a& V7 V7 ]5 o# r! C<dd>qualcomm? snapdragon™ 805 processor</dd>/ M. j# K+ V" U" y
</dl>
/ D4 M7 ^) Y4 X! ~; I/ M& V</details>
4 A o, ]7 X- p3 \ h% Q首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的html元素作为详情内容，这些内容需要在点击<summary>才会呈现。
; g) v6 X9 C" J/ I上面代码呈现出来的效果会是下面这样的：# U0 y% N8 d- L1 O4 u
1 y0 q% W) n' l9 p
html5 <details> 标签 三联
, m6 W5 m7 u& I+ k" s最开始详情是隐藏的，当点击时都会展现。
) e7 W: q" Q2 Mopen 属性4 n7 ]) t; i7 U- n# b+ y: [, w4 j
当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。1 l/ V# ^% p* i- f P! [
<details open>% n: i. |) t* M
<summary>google nexus 6</summary>5 S& J- @2 }( y' y8 ?( ~
<p>商品详情：</p> q( z7 m1 B) Y/ G
<dl>% ~1 @- q1 ?1 l
<dt>屏幕</dt>
* _! ?& U& B/ G! ~" ?<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
4 Y: |: |7 K- E' @+ s! U& Q<dt>电池</dt> q3 G+ C+ `- e7 \- N; H' Q6 [
<dd>3220 mah</dd>* g* F8 |- s) T/ x* ?! j( ]. N5 m
<dt>相机</dt>, w( n8 j; M0 [. `% X8 B
<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>
1 q1 ~' a3 k3 z! W& ^4 G- b<dt>处理器</dt>
2 V6 q+ H5 Q$ u# W<dd>qualcomm? snapdragon™ 805 processor</dd>3 d/ t$ v7 I" W7 g: T
</dl>% J! t7 X7 h& g* J: v2 v
</details># Z) A1 @6 R P- v7 @$ ?( M+ `6 s4 t- d
此时默认会把详情展开，而点击标题后会折叠起来。
" Q8 g* ]0 T8 O; j' }" f" d3 a示例, m- V- e7 h2 ~+ T/ U9 D
示例如上面那样，预览在线版本可点击此处。* x1 o' k# v* H3 _# ?& c8 u+ B
浏览器兼容性5 Y; s6 |4 m& G6 p
由于是html5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅chrome, safari 8+ 和opera 26+支持此标签。
) R" F+ C" o1 p) ^7 x# ]4 W可喜的是，如果你在caniuse开启了「显示来自uc浏览器的结果」 选项的话，会发现，国产的uc浏览器也支持了此标签。
* V/ W; F! j' _# }) E# N9 ~1 V! S& T* [# Z
" e- Y2 `0 l8 r, T
更多网页制作信息请查看： 网页制作 |
|
% h0 ]) x, S% |! ^$ W
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡