details元素实现的功能就是达到一种收缩展开切换的效果，在一般情况下这都是通过JavaScript来实现，当然在jQuery中也有现成的函数可以调用。details通过标签就能实现类似的效果。details有一个open属性，点击它之后展开时会自动设定该属性值为true，收缩时该属性又被移除。
下面是一个details元素的使用实例：
<article>
其运行效果（details仅在chrome浏览器下有效，其他浏览器暂不支持）如图5.30所示。
图5.30 ＜details＞标签使用实例（一）
从上图可以看出，对于details元素，点击以后会展开一块内容，这块内容可以是任何元素，包括文本、图片、连接、表格等，有带指向的箭头icon标示状态，图中展示了一个主菜单和子菜单的关系事例。
对于datalist元素，正常显示的时候是个text框，鼠标可以点开一个下拉list，里面有可供选择的内容，比如在图中可以选择Nokia，当然如果用户当前想选择htc，但是下拉列表中没有这项，这时就可以直接输入htc提交，这点比较灵活。mark元素，完成高亮显示；progress元素实现进度条显示。
如果觉得details元素的自带的黑色三角箭头icon有点丑，想自己修饰一下，这也是可以的，可以用CSS的样式表来设计样式。如下面的CSS代码：
上面的代码把黑色小箭头修饰成了红色背景的白色图标。其运行效果如图5.31所示。(www.xing528.com)
图5.31 ＜details＞标签使用实例（二）
如果根本不想用自带的icon，可以定义自己喜欢的图标样式，这也是可以做到的。
可以用CSS让元素自己的icon不显示，再用CSS3的before和after来拼接自定义的样式。这会用到下面三个主要的语法：
（1）自带的图标不显示：summary：：-webkit-details-marker｛display：none｝；
（2）收缩状态的样式：summary：after｛content：＂＋＂；｝；
（3）展开状态的样式：details［open］summary：after｛content：＂-＂；｝。
当然这里只是简单地用“＋／-”符号来说明，用可以自定义图片进去。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
