曾几何时,我们创建可以显示/隐藏一些内容的小组件时,我们不得不使用Javascript.有时候你可能不得不为这个小功能,下载一个完整的 JS 库才能达到这个功能效果.为下面的时刻欢呼吧!HTML5提供了创建这种拖拽特点的方法,我们仅仅需要简单的几行html代码就能获得这种效果(从目前而言,这种效果还依赖于使用的浏览器,当然,在不久的将来,这可能不是问题).下面让我们一起来看看 detail 元素.下面就是规范中的描述The details element represents a disclosure widget from which the user can obtain additional information or controls. WHATWG HTML5 specification 理论上我们可以用它创建那种折叠的小组件,用户可以有打开和关闭的交互.在 details 我们可以放入我们任何想放入的内容.浏览器的支持情况在我们开始之前,实际一点,让我们看看目前浏览器的支持情况,目前只有chrome支持 details 元素.Opera很快就会支持Opera will support it soon,让我们来用chrome演示这种效果吧. details 的使用方法这里有两个相关的元素: details 和可选的 让我们来看下面的代码: summary Show/Hide me /summary p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. /p /details 你可以通过下面的链接察看效果see this in action over at jsbin.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.OPen 属性在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将 detail 默认的视觉属性通过布尔值作修改，让其当我们加载页面的时候是展开的： summary Show/Hide me /summary p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. /p /details 注意，这里并没有 closed 属性，因为只要你移除 open 属性，执行的就是 closed 属性效果。 summary 元素 我们已经简要的看了 的作用。因为它是短语内容，我们可以使用内联 (inline)标签 span; 。我们为什么会有这种想法呢？也许这样子能更方便的通过而外样式控制显示效果或者像 spec 建议的那样：为一个表单元素增加一个 label 标签。如果他能生效的话，至少能让我很顺手： summary label for= name Name: /label /summary input type= text id= name name= name / /details 常理看，我们点击 summary 的任何位置都应该展开 detail 元素的内容。但是在这个例子中，我们点击 summary 并没有展开内容，因为你点击的是 label 他会将焦点放到 input 标签-即使那部分内容被隐藏在 details 标签。 很明显，在这点需要更好的声明，你认为这个地方应该发生什么事情呢？可能某个浏览器生产商能看一下这个效果。 details 元素多层嵌套你可以在 details 中嵌套 details ，可以完美的案例查看这个效果： summary Question 1 /summary p strong Pellentesque habitant morbi tristique /strong senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. em Aenean ultricies mi vitae est. /em Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, code commodo vitae /code , ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. a href= # Donec non enim /a in turpis pulvinar facilisis. Ut felis. /p details summary Related documents /summary ul li a href= # Lorem ipsum dolor sit amet, consectetuer adipiscing elit. /a /li li a href= # Aliquam tincidunt mauris eu risus. /a /li li a href= # Lorem ipsum dolor sit amet, consectetuer adipiscing elit. /a /li li a href= # Aliquam tincidunt mauris eu risus. /a /li /ul /details /details 在哪些情况时会用到 details ?FAQ表可能是我们最先涌现的想法。大家经常使用手风琴效果是用在FAQ列表，所以 details 是这一效果的最佳效果。 考虑到这一系列内容，它可能被固定在某一区域，当我们滚动内容的时候。像这样子？ 你也可以使用 details 来操作博客的评论内容，用户简介，下载列表，复杂的表单，或者像规范中描述下面的应用： An example of the details element from the spec实际上，只要你看看我写的wordpress，会发现有大量的使用 details 的机会。让我们在评论中了解一下你的观点和想法。样式格式化你如何对这个定义样式？同时，在webkit浏览器中我们可以使用伪类样式 ::-webkit-details-marker。你可以看到这个小的案例： 我们也可以将这个小组件定位。这里是向右浮动的这就是我们初始化效果。 我们如何将默认的组件Icon自定义呢？那就是用 属性选择器 (attribute selector),你可以用来检测 details 元素是打开的还是关闭的，然后为其定义一个合适的背景图片。我们咋下面的例子中作了一个类似的效果，使用 :after pseudo-element元素定义成我们喜欢的背景图片： 在上面的例子中，我们使用文本 + 和 - 来定义这个组件的状态，根据你的设计需要，你可能希望使用 :before来代替 :after，这两个为类元素都可以使用 image. details的[open]属性选择器能创造很多有意思的可能性。因为我们是好医生，下面是我们装饰后的效果，下面是截屏效果： Styled details element in Chrome如果我们可以用过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 标签那就好了。在这篇文章中，我们阐述了如何去使用 details 和 summary 元素。 details 是一个新元素，通过和 summary 元素通过浏览器可以创造手风琴的交互效果。目前， details 只能在 Chrome 工作，不过我们期待这会在不久的将来有所改变。这里只有一个css trick我们可以使用 ::-webkit-details-marker,但是我们拥有很多的其它css。让我们在评论中知道关于 details 元素你在这方面的经验和想法。中文原文：details 和 summary 元素 英文原文：The details and summary elements 更多编程语言
