html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。
' }5 E* O% Z6 t' w$ b用法% Y- P+ |" O! a2 [; v d' b# H
一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。% y( _6 K" D6 ]: s9 h; {$ M( Y8 N
其大致写法如下：
' F/ P5 {8 W4 h6 @0 G8 S2 R+ u, q<details>2 ^9 k. Z/ F' l O2 S& @) T
<summary>google nexus 6</summary7 X9 L8 ~' M, [+ L
<p>商品详情：</p>1 {4 C8 B8 |. l3 k0 d
<dl>& X4 \# p& I: w$ }
<dt>屏幕</dt># C' `' `" l( n5 L4 E3 W3 [
<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>( q |; p$ X4 _3 y* X8 W
<dt>电池</dt>. [: I6 Q% L% t3 c; F0 m6 Z
<dd>3220 mah</dd>
) U0 g) [8 W1 q8 ~8 C* V$ _5 t/ _1 r<dt>相机</dt>& O) r, w4 ]6 `
<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>6 d L/ I, M4 |7 T# b Q1 X
<dt>处理器</dt>
/ M8 \* b* v% y" ^# ~<dd>qualcomm? snapdragon™ 805 processor</dd>, \. ?' z) n i1 x
</dl>
( @) ^1 y( H% D/ a& _</details>
* G4 h; A% [: D9 `; R0 \+ R1 p首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的html元素作为详情内容，这些内容需要在点击<summary>才会呈现。
7 q0 Q6 w) U2 X* Z上面代码呈现出来的效果会是下面这样的：* M0 ]# b/ r2 _" H
' |3 w& i \- b+ a) L3 c$ \html5 <details> 标签 三联9 o; J, s7 {* K4 x
最开始详情是隐藏的，当点击时都会展现。
a. V! d4 K; Q+ dopen 属性
$ B" s. C+ A: I, T3 e( K# W当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。5 I( }" `- C+ E$ _5 Z
<details open>7 [! j9 l; ?& i, ~( D
<summary>google nexus 6</summary>
/ |; y r8 [6 F- s<p>商品详情：</p>$ ?- c# a! R) O! i
<dl>" a" W. K9 m3 f: m
<dt>屏幕</dt>
! {/ A! r3 O, h ^2 @0 _<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
6 U: U0 P3 O2 N! d<dt>电池</dt>
4 J9 `. L3 _$ @<dd>3220 mah</dd>: t; W" ?5 v$ Z6 ^, d+ F
<dt>相机</dt># F' _9 N* l0 o- m5 X
<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>6 r+ ~# e8 Z. ]% J% s
<dt>处理器</dt>5 U' o" `; N% T! P5 s0 e) ]
<dd>qualcomm? snapdragon™ 805 processor</dd>
9 _& S# k- W5 @3 H3 \" a</dl>9 C4 o c/ c$ C$ s, N9 r
</details>) n! `2 O4 A' ~7 V2 c" g6 Z9 m" P/ s
此时默认会把详情展开，而点击标题后会折叠起来。
* a, x& [& d* X示例9 ~/ T: U3 R, g* Y: R: Y3 K' R
示例如上面那样，预览在线版本可点击此处。/ D5 N# P/ [& _+ R; ^
浏览器兼容性
( [# n$ u' V/ p& W2 t由于是html5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅chrome, safari 8+ 和opera 26+支持此标签。
% d5 F( ^5 b) ^3 |" w可喜的是，如果你在caniuse开启了「显示来自uc浏览器的结果」 选项的话，会发现，国产的uc浏览器也支持了此标签。3 O& m4 A( }8 h4 \7 }
4 s$ O0 d5 A& A# B$ ^- x1 t1 F) N) I7 k X4 P
更多网页制作信息请查看： 网页制作 |
|
Ai优选商家寻找本地地推合作伙伴202求项目与合作
拥抱AI搜索新时代！GEO优化成为企业流量增808网络资讯
GEO优化如何让企业流量翻倍？707网络资讯
8 b) ?# x* `& p: z0 M% l) j" a) M2 @
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡