Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

HTML5 强大的 Details 元素

HTML5 新标签 details 元素刚刚被集成到 Chrome 最新的 12 版中。我将会在今天的快速入门中展示如何来使用它。

________________________________________

        Details 标签可以用来做什么?

        它本质上允许我们在点击标签时显示和隐藏内容。你一定相当熟悉这种效果,但是直到现在,它总是用 Javascript 实现的。想象头部之后有一个箭头,当你点击它时,下面的附加信息将会呈现。再次点击箭头内容消失。FAQ 页面中经常使用这个功能。

        Details 元素允许我们完全抛开 Javascript。或者说,它将做到这样,因为浏览器的支持还乏善可陈。

        下图是浏览器的支持情况:

废话少说,来看代码吧:


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步