html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。
: i/ z5 Z% N2 w2 n0 X用法
0 _8 c! i* Q( g) t0 i8 Y一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。
/ [6 U# ]9 Q9 }2 s8 P' ?其大致写法如下：- w6 o1 j; A U: {: Y, b* G+ q0 [
<details>1 m* A9 S" q! U$ `" h0 h
<summary>google nexus 6</summary9 A# z Z! T* ~+ ~$ C0 t4 d1 D' S5 c' G% f
<p>商品详情：</p>7 e9 F. `4 n9 l$ C9 O
<dl>
9 }2 I, J. n; W<dt>屏幕</dt>- X. ~6 H8 _9 N1 r( N/ Q! E7 I
<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>. C$ Q# i+ w u* l& i+ t" A
<dt>电池</dt>
' P- Q& H" Z" A: ~9 A. H. d/ ~<dd>3220 mah</dd>% d6 ~% ?$ _, v1 L
<dt>相机</dt>
/ K) K' K1 i: C! |, F! o# g l9 m<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>
, g: a O8 r. U' x% |<dt>处理器</dt>
. u7 a+ a" B# e$ y<dd>qualcomm? snapdragon™ 805 processor</dd>$ Z% N) v O4 ]2 m( ?3 R9 m
</dl># X1 @# C0 e2 V) D/ l8 O3 ]% w2 K5 M
</details>
/ f0 T7 n* f4 M) X' S: B+ p0 p( ?$ D首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的html元素作为详情内容，这些内容需要在点击<summary>才会呈现。# g5 s- u6 F3 _1 `
上面代码呈现出来的效果会是下面这样的：
) J1 z/ r# `. R8 d `% Z* [
! r& J, m4 I. ?# @* X! Rhtml5 <details> 标签 三联
5 o; A: d- T; V最开始详情是隐藏的，当点击时都会展现。9 G* t1 B' E9 C" _. F
open 属性
+ \' d) }: t, o+ P- N t当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。1 Z7 j% w! U; f+ L% p! i& I3 C
<details open>* `) b/ d- o4 Y3 d( [) d% r9 n4 g
<summary>google nexus 6</summary>
+ ^7 L5 l1 x/ A<p>商品详情：</p>
3 ?# Q* D" k/ R: D( Y% ]! G<dl>
6 Z' k( x5 D$ r( Q- Z# e `6 R2 @<dt>屏幕</dt>+ w9 z# ~7 U7 L' e
<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>7 _9 d; u+ D( S) U
<dt>电池</dt>5 I! N$ r: }1 j" ~" S2 \
<dd>3220 mah</dd>5 T1 w- v# X# v5 ~
<dt>相机</dt>
K6 |/ I3 ?* P. H<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>3 \( } F- s+ \, b/ Z$ k7 y7 W
<dt>处理器</dt>
: m0 Z1 q8 l' l- B<dd>qualcomm? snapdragon™ 805 processor</dd>
! w0 N { V6 p, {8 q* `</dl>0 P, K, s+ b! I1 R
</details>
& E. {6 R7 j. N, E: t" ?. N* T此时默认会把详情展开，而点击标题后会折叠起来。8 [# ]7 x: K0 y6 C& q0 O r
示例
; g( m* }0 I" B5 b! x; {示例如上面那样，预览在线版本可点击此处。8 N0 y# l, u4 D
浏览器兼容性6 F) V L& [% D
由于是html5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅chrome, safari 8+ 和opera 26+支持此标签。
7 @) I7 f, S$ ^9 s可喜的是，如果你在caniuse开启了「显示来自uc浏览器的结果」 选项的话，会发现，国产的uc浏览器也支持了此标签。- ?& e3 n3 R! l1 p) E8 C
9 A7 a8 m' |/ e0 v( N* k
8 I) n+ w, _) Q8 @0 q- Z更多网页制作信息请查看： 网页制作 |
|
拥抱AI搜索新时代！GEO优化成为企业流量增505网络资讯
GEO优化如何让企业流量翻倍？404网络资讯
GEO优化，企业抢占流量高地的制胜法宝404网络资讯
- q m4 v7 m( H6 w5 z. E( \
0 p( x4 e2 j. c) G
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡