使列表框list1获得焦点的命令

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

让我们来看下面的代码:

<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>默认的视觉属性通过布尔值作修改，让其当我们加载页面的时候是展开的：

<details open>

<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>标签。如果他能生效的话，至少能让我很顺手：

<details>

<summary><label for="name">Name:</label></summary>

<input type="text" id="name" name="name" />

</details>

常理看，我们点击 summary 的任何位置都应该展开

<detail>元素的内容。但是在这个例子中，我们点击<summary>并没有展开内容，因为你点击的

是<label>他会将焦点放到 <input>标签-即使那部分内容被隐藏在<details>标签。

很明显，在这点需要更好的声明，你认为这个地方应该发生什么事情呢？可能某个浏览器生产商能看一下这个效果。

<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>

焦点的意思就是被选中，和文本框相似，<button type="button" autofocus="autofocus">点击这里</button>当页面加载完成之后，这个按钮会被选中。你可以用火狐试试。

---