如何使用details元素和summary元素

答案:1 悬赏:0 手机版

解决时间 2021-02-01 04:42

提问者网友：轮囘Li巡影
2021-01-31 06:11

最佳答案

五星知识达人网友：神也偏爱
2021-01-31 06:26

曾几何时,我们创建可以显示/隐藏一些内容的小组件时,我们不得不使用Javascript.有时候你可能不得不为这个小功能,下载一个完整的
JS
库才能达到这个功能效果.为下面的时刻欢呼吧!HTML5提供了创建这种拖拽特点的方法,我们仅仅需要简单的几行html代码就能获得这种效果(从目前而
言,这种效果还依赖于使用的浏览器,当然,在不久的将来,这可能不是问题).下面让我们一起来看看元素.

下面就是规范中的描述

The details element represents a disclosure widget from which the user can obtain additional information or controls.
— WHATWG HTML5 specification

理论上我们可以用它创建那种折叠的小组件,用户可以有打开和关闭的交互.在我们可以放入我们任何想放入的内容.

浏览器的支持情况

在我们开始之前,实际一点,让我们看看目前浏览器的支持情况,目前只有chrome支持元素.Opera很快就会支持Opera will support it soon,让我们来用chrome演示这种效果吧.

这里有两个相关的元素:和可选的
让我们来看下面的代码:

Show/Hide me

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

你可以通过下面的链接察看效果see this in action over at jsbin.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.

OPen 属性

在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将默认的视觉属性通过布尔值作修改，让其当我们加载页面的时候是展开的：

Show/Hide me

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

注意，这里并没有 closed 属性，因为只要你移除 open 属性，执行的就是 closed 属性效果。

元素
我们已经简要的看了

的作用。因为它是短语内
容，我们可以使用内联 (inline)标签
。我们为什么会有这种想法呢？也许这样子能更方便的通过而外样式控制显示效果或者像 spec
建议的那样：为一个表单元素增加一个标签。如果他能生效的话，至少能让我很顺手：

Name:

常理看，我们点击 summary 的任何位置都应该展开
元素的内容。但是在这个例子中，我们点击并没有展开内容，因为你点击的
是他会将焦点放到标签-即使那部分内容被隐藏在标签。
很明显，在这点需要更好的声明，你认为这个地方应该发生什么事情呢？可能某个浏览器生产商能看一下这个效果。

元素多层嵌套

你可以在中嵌套，可以完美的案例查看这个效果：
Question 1

Pellentesque
habitant morbi tristique 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. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget
tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
enim ac dui. Donec non enim in turpis
pulvinar facilisis. Ut felis.