如何使用details元素和summary元素

曾几何时,我们创建可以显示/隐藏一些内容的小组件时,我们不得不使用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>和可选的
让我们来看下面的代码: