html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。
2 W t& c! G3 x0 \6 [% ~# C1 |1 V用法( x/ Q4 V: u. w* m7 e
一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。
7 P3 d' C$ M0 m1 N* B其大致写法如下：
- t1 i' M: S* W0 j9 B<details>1 f7 a/ d" l2 e
<summary>google nexus 6</summary
$ D6 q' E7 D$ ?; l) ~<p>商品详情：</p>
7 }+ E0 w. }, z; F2 o3 W<dl>: l) K" G4 B- J8 H' j4 _7 P' t
<dt>屏幕</dt>+ }1 v& J7 p) `; o0 V& X# u
<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
) |' ?% n# j" q. H# ~<dt>电池</dt>
& R1 c+ e: J; N5 T( n<dd>3220 mah</dd>
! q$ {1 d: [) G: Y/ U<dt>相机</dt>. q0 F9 C6 r/ _/ O: v8 l
<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>" v' ]7 R9 j! g+ v" N# a
<dt>处理器</dt>3 l7 W$ V5 M, z* M
<dd>qualcomm? snapdragon™ 805 processor</dd>- L' Q2 c/ \ ?! X
</dl>9 l$ ?; H3 p5 W* U
</details>
5 R; m$ B Q1 R6 m5 v9 _0 r首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的html元素作为详情内容，这些内容需要在点击<summary>才会呈现。 x% v. p; J& b) i% U
上面代码呈现出来的效果会是下面这样的：
/ ], k# d% |0 ^
) h: w8 w- y" N: B2 _7 Z; Ahtml5 <details> 标签 三联
}* r5 D, S& M0 f最开始详情是隐藏的，当点击时都会展现。
2 ^( X1 b7 H: f! q3 Xopen 属性
! ?# S$ U4 W2 Y2 T+ c4 g7 u& w当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。
. A7 r I9 i/ B6 ]8 v. M# l! Q. H$ U<details open>( H' l5 i8 Y% P" f: `6 O; l5 h
<summary>google nexus 6</summary>
" e+ W2 h+ i% g7 L0 j! f7 f<p>商品详情：</p>
* A3 r# @ v, P& x+ ~<dl>6 q6 I9 O5 Z: L! o
<dt>屏幕</dt>
* X- y/ t2 k6 V; W8 l5 K% F<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>! n& p4 E: d% j2 n6 N6 y. b
<dt>电池</dt>
5 P$ G9 T3 f& |! D( A<dd>3220 mah</dd>6 B$ r4 Z- x8 f/ Q( f) n7 |% Y
<dt>相机</dt>; ?1 \1 l3 }9 y0 h$ d
<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>. l$ G, Y" O: |6 X
<dt>处理器</dt>1 T& C1 L9 |: v. `/ m: L
<dd>qualcomm? snapdragon™ 805 processor</dd>% q+ C. Q: T, W# B# K
</dl>
: v7 r0 M4 K" b* y1 S4 [1 \</details>& V, a4 j, Q2 v$ G; g
此时默认会把详情展开，而点击标题后会折叠起来。% t& }4 t4 `9 O) x$ g' y2 }
示例
8 [; h/ y8 Y- {- r* A. [示例如上面那样，预览在线版本可点击此处。! D# |# Y @4 E& j, E s0 k, ]* X
浏览器兼容性 Y- H; b0 v9 o( ~8 V. n+ T
由于是html5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅chrome, safari 8+ 和opera 26+支持此标签。
4 N* w# f( k& m2 \: U% D2 r可喜的是，如果你在caniuse开启了「显示来自uc浏览器的结果」 选项的话，会发现，国产的uc浏览器也支持了此标签。! Q( n- w% Y: A5 _
( y8 ~/ x+ y6 e* Q
+ I1 q1 b( C. v2 J& ~* t. _更多网页制作信息请查看： 网页制作 |
|
Ai优选商家寻找本地地推合作伙伴303求项目与合作
拥抱AI搜索新时代！GEO优化成为企业流量增909网络资讯
GEO优化如何让企业流量翻倍？808网络资讯
1 h0 ?2 q. p* y$ w: A6 u" b
1 ~0 J* {6 E( i# x
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡