HTML 5 <details> 标签

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

<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