HTML 5 <details> 标签

<details> 标签用于描述文档或文档某个部分的细节。

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

Demo

To see which browsers currently support this tag go to can I use website.

Please note at the time of writing this details tag is currently only supported in webkit browsers.

jQuery Version Of Details Tag

The problem with HTML5 at the moment is that it's still not fully supported mainly because people are still using out of date browsers such as IE6-8. The details tag is something that is not supported on many browsers so you might want to use the jQuery alternative.

This feature is something that can easy be done because of the slideToggle() method which you can just apply to the content on the click event of the title.

For this example we need to change the HTML.

<div class="jQueryDetailsExample">
	<h2>Click Here For jQuery Version</h2>
	<p>This is how it's done using jQuery</p>
</div>

We need to add the jQuery so it will do the same as the details tag, therefore we need to start off by hiding the paragraph which is our content so we can toggle the display. Then on the click event of the h2 tag we can toggle the paragraph.

Copy the following to copy the details functionality in jQuery.

$(document).ready(function(){
	$(".jQueryDetailsExample p").hide();

	$(".jQueryDetailsExample h2").click(function(){
		$(this).siblings("p").slideToggle();
	});
})

The jQuery example is also on the demo page please visit to see the different between them.

Demo

转自：http://www.paulund.co.uk/html5-details-tag