HTML5中新的summary和details标签学习
原创
©著作权归作者所有:来自51CTO博客作者mb5c80f4c73b73a的原创作品,请联系作者获取转载授权,否则将追究法律责任
HTML5中的标签是越来越多了,下面挖掘两个居然在标准中提到的,但依然绝大部分浏览器都不支持的标签,目前只有chrome支持(最新版本)。
所谓的summary和detail,其实的效果有点象以前使用javascript去实现折叠内容,比如如下代码:
<details>
<summary>Discussion</summary>
<p>
<label for="comment_status"><input type="checkbox" checked="checked" value="open" id="comment_status" name="comment_status"> Allow comments.</label><br>
<label for="ping_status"><input type="checkbox" value="open" id="ping_status" name="ping_status"> Allow trackbacks and pingbacks on this page.</label>
</p>
</details>
<details>
<summary>Author</summary>
<p>
<label for="post_author_override">Author</label>
<select id="post_author_override" name="post_author_override">
<option>Aaron Boodman</option>
…
<option>Zak Ruvalcaba</option>
</select>
</p>
</details>
则其实当初次显示时,只会显示<summary>部分,即只显示Discussion和
Author两个文字,当鼠标分别去点它们时,则会向下展示出<details>中除<summary>
外的其他部分文字内容。
总的来说,其效果可以参考网上这张图:
[img]http://www.webjx.com/files/allimg/110818/1748380.jpg[/img]
而网上这篇文章及效果,更好地提供了用jquery方法去实现的方法,推荐阅读:
http://mathiasbynens.be/notes/html5-details-jquery