曾几何时,我们创建可以显示/隐藏一些内容的小组件时,我们不得不使用Javascript.有时候你可能不得不为这个小功能,下载一个完整的 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
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
你可以通过下面的链接察看效果see this in action over at jsbin.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.
OPen 属性
在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将
Show/Hide me
注意，这里并没有 closed 属性，因为只要你移除 open 属性，执行的就是 closed 属性效果。元素
我们已经简要的看了
的作用。因为它是短语内
容，我们可以使用内联 (inline)标签
建议的那样：为一个表单元素增加一个
内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024