HTML5教程:如何使用details元素和summary元素

在上面的例子中，我们使用文本 “+”和“-”来定义这个组件的状态，根据你的设计需要，你可能希望使用 :before来代替 :after，这两个为类元素都可以使用 image.
details的[open]属性选择器能创造很多有意思的可能性。因为我们是好医生，下面是我们装饰后的效果，下面是截屏效果：

如果我们可以用过css的动画效果来修饰打开和关闭时的状态，这样设计就更完美了，但是目前为止我们还没有办法做到这点。

可访问性

不幸的是在我们写这篇文章的时候，<details>h还无法通过键盘访问，Steve Faulkner 写到：

Bottom line is, currently no keyboard support and no usable information exposed to assistive technology.

自己试一下，如果你使用鼠标打开 <details> 元素，你可以使用键盘到达内容部分，但是你无法使用键盘打开和关闭区域。所以目前这并不是理想状态，不过我们相信这个小国很快会被改进。

向后兼容

在我们抱怨其在IE6中无法生效之前，感谢这些聪明的人们，我们可以提供优雅的像狗兼容。这些效果也被列在下面的网站very handy collection of cross-browser polyfills，这两个都需要 jQuery:

• <details> fallback via jQuery by Mathias Bynens
• Another <details> alternative, also based on jQuery by Manuel Bieh

更新：感谢的评论。上面的代码并不是100%可靠，因为他在某些chrome版本下会失败。你可以使用this Modernizr snippet。

我们为何使用这种类型的交互？

言归正传，为什么会有这个效果在HTML5中？就像其它HTML5的效果，使用这种效果能够更简单。比如时间选择，Date pickers, sliders, progress indicators, 现在这种手风琴效果就可以在不使用JavaScript的情况下更方便实施。谁能想到下一个是什么？如果是 tabs 标签那就好了。

总结

在这篇文章中，我们阐述

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!