html5 中新增的<details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。: U6 }* y, F0 E* [# ~
用法3 g8 }* q! p; d/ {; P
一般情况下，details用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jquery手风琴插件差不多。+ \& D) ]& \" a. e% N. ~
其大致写法如下：3 `% U1 F* H- {1 G% R h
<details>3 T! y$ D( y& {" X1 n/ \
<summary>google nexus 6</summary/ S# k4 \7 A1 N! M5 ~4 j
<p>商品详情：</p>
: I* h' K# f; g<dl>" W8 ]6 ~; Q) V g9 s
<dt>屏幕</dt>
$ T. T4 b$ ^* R; }1 j<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd> |% W6 S5 D: V
<dt>电池</dt>6 R9 _0 O; m8 X
<dd>3220 mah</dd>
6 O5 I. m5 A$ W8 l<dt>相机</dt>
+ b* s9 N( w. e& G3 d8 X# n<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>
, H2 ^( N, U, c2 x. p* q! s* Z<dt>处理器</dt>
% f" e% K$ X7 E- y8 O& M<dd>qualcomm? snapdragon™ 805 processor</dd>
! G3 i. J/ b" |! I6 _3 S: Y</dl>* x! v. V) U) U4 l# n
</details>0 {' D" X+ k+ @2 q3 w* B" L
首先是<details>标签，里面接着是标题<summary>，这里面的内容一般简短，具有总结性，会展示在页面。接着可以跟任意类型的html元素作为详情内容，这些内容需要在点击<summary>才会呈现。6 a b x ?* A- p) p% Z4 g6 u
上面代码呈现出来的效果会是下面这样的：
; s: b& Q% X6 n7 E% s& z
* _0 y5 I" N! s: Phtml5 <details> 标签 三联
- Q( d9 w7 Y( y! c% { _最开始详情是隐藏的，当点击时都会展现。
+ ]$ p$ F( |# M7 O0 O7 O( Xopen 属性; U1 L0 c. j( l+ l& @7 V
当然，你也可以通过给<details>标签设置open属性让它默认为展开状态。* m3 Y" V: B4 E9 P. C
<details open>
% }+ u" b) B+ {) u<summary>google nexus 6</summary>
& ~6 R- z( C* K+ n7 }<p>商品详情：</p>9 L5 {. @" m. X6 L7 z& @7 ^2 B# u
<dl>
" G6 B6 b; C% |; t: @<dt>屏幕</dt>
! F& L ?6 Z" I$ q<dd>5.96” 2560x1440 qhd amoled display (493 ppi)</dd>
* I; r! W! I7 t$ P" x5 D4 W7 X<dt>电池</dt>
; s2 V) p L4 l1 P6 n<dd>3220 mah</dd>: d P6 g+ x/ m+ D; Z
<dt>相机</dt>
+ F( z2 y. ?" }+ z2 W- A* ^ n<dd>13mp rear-facing with optical image stabilization 2mp front-facing</dd>- Q$ R: L% x$ }$ {# {' e' X
<dt>处理器</dt>8 E$ U3 X1 j( \+ B/ f5 d" `* s, N0 U
<dd>qualcomm? snapdragon™ 805 processor</dd>
1 N+ c0 {- S/ |0 O) B</dl>
8 H! n" e) b! z+ W$ c0 f</details>
5 V8 u$ q' M+ h9 @此时默认会把详情展开，而点击标题后会折叠起来。% D4 W) ~) t3 D, ?: y) l7 P
示例
3 \- J$ L7 M+ b* J示例如上面那样，预览在线版本可点击此处。/ G/ Q' Z9 U2 W3 Y" O* g O0 L
浏览器兼容性
8 i5 ] ^) E; |8 p) d由于是html5新标签，浏览器支持情况不是很理想。从来自caniuse的数据来看，目前仅chrome, safari 8+ 和opera 26+支持此标签。" B N! E* T# C! l1 v
可喜的是，如果你在caniuse开启了「显示来自uc浏览器的结果」 选项的话，会发现，国产的uc浏览器也支持了此标签。0 }- }4 y$ @3 v; j8 V' s- L" l) g3 k
, T9 S p6 U# I' g
/ l' o: h* f/ x8 C! T3 l更多网页制作信息请查看： 网页制作 |
|
Ai优选商家寻找本地地推合作伙伴1111求项目与合作
拥抱AI搜索新时代！GEO优化成为企业流量增1515网络资讯
GEO优化如何让企业流量翻倍？1416网络资讯
3 B; u3 u. e* p8 E9 ]9 N. T! A# g
/ r, H4 I7 D* _: f: e
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡