html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。4 e' X$ ^! C9 k9 M' u
用法
$ `% ~6 Q$ J- E, e! S$ U* P/ @# q一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。
) H( \2 y! z1 i$ a0 Y其大致写法如下：5 n$ F: C/ ~& R# s
<details>
! ?9 Q% ]% X' l% q, l9 V<summary>google nexus 6</summary& z- ?0 e! F+ A
<p>商品详情：</p>7 }: h4 @2 ?* ?
<dl>
/ j' h: N* M! a; x<dt>屏幕</dt>
+ U2 I: d/ C" D3 q8 {7 z<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
2 O* u( T) A# s: E! }<dt>电池</dt>
9 K! k8 O3 X9 N# k<dd>3220 mah</dd>% H+ [8 k6 a" t' _! j( G1 v# J
<dt>相机</dt>- O& z4 \5 G4 s3 }8 f( Q4 c
<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>
% u8 Y+ m$ ]! p3 Z% N' f# T<dt>处理器</dt>! w3 x: w! c x, _
<dd>qualcomm? snapdragon™ 805 processor</dd>/ M9 r0 s/ R5 }/ ?# ]1 J5 I
</dl>$ Z; c8 t1 F9 e5 E, d& \
</details>* T v- w- Y0 F3 x% X3 l
首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的html元素作为详情内容，这些内容需要在点击<summary>才会呈现。- \! Z3 v! F9 V! G0 b
上面代码呈现出来的效果会是下面这样的：
$ m" J3 o6 @% d8 V2 |: D2 `8 X
f) p* E5 K( X e4 t! K) ?; xhtml5 <details> 标签 三联
% b' G' y- T1 R最开始详情是隐藏的，当点击时都会展现。
0 m+ c) i Z& U( k2 Topen 属性# c/ C7 Y# k2 k' ]
当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。% k2 Z4 R, y1 s) }; ^+ z
<details open>: x4 {& G) o3 T6 W) S( X
<summary>google nexus 6</summary>
4 b3 s. V& W. w# V7 W {<p>商品详情：</p>% g Y) _6 [* |8 k
<dl>
! w5 C9 C" \2 x( B: @4 u7 K) |<dt>屏幕</dt>
0 x- I |; n7 |- u<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
8 R7 _, H% P* O8 T) P7 d<dt>电池</dt>& Z' q8 j. o# A7 |
<dd>3220 mah</dd>1 x/ Q+ C8 |2 B/ s) X c
<dt>相机</dt>
: }7 R J1 Y2 T6 B& b* e<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>. I7 X; ?. V# {! P' t0 }
<dt>处理器</dt>: U; g7 x4 B2 `+ `
<dd>qualcomm? snapdragon™ 805 processor</dd>
) o% A) M) p% g0 v</dl>
$ F+ r9 e! y0 K9 J( T* x0 I! L- n</details>; T$ s. g u& t, G& {; Z
此时默认会把详情展开，而点击标题后会折叠起来。4 [2 |. e; B) _
示例( \( Q S) O0 j; C0 c
示例如上面那样，预览在线版本可点击此处。% {; P+ P. v# P% h1 r
浏览器兼容性+ o7 @& s2 }3 @; d+ @9 H8 L
由于是html5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅chrome, safari 8+ 和opera 26+支持此标签。
! b% E3 x0 j/ g" P8 t! @可喜的是，如果你在caniuse开启了「显示来自uc浏览器的结果」 选项的话，会发现，国产的uc浏览器也支持了此标签。; h3 k" B9 ]6 ~1 F5 d$ X3 X8 Y
& `3 W! {3 n- S7 L# O& i2 h5 N8 H9 I9 T" |
更多网页制作信息请查看： 网页制作 |
|
Ai优选商家寻找本地地推合作伙伴101求项目与合作
拥抱AI搜索新时代！GEO优化成为企业流量增707网络资讯
GEO优化如何让企业流量翻倍？707网络资讯
. E# P; D5 W# w, V
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡