HTML5中新的summary跟details标签学习
HTML5中新的summary和details标签学习
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>
外的其他部分文字内容。
总的来说，其效果可以参考网上这张图：
而网上这篇文章及效果，更好地提供了用jquery方法去实现的方法，推荐阅读：
http://mathiasbynens.be/notes/html5-details-jquery
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>
外的其他部分文字内容。
总的来说，其效果可以参考网上这张图：
而网上这篇文章及效果，更好地提供了用jquery方法去实现的方法，推荐阅读：
http://mathiasbynens.be/notes/html5-details-jquery