? 譯自：[](http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-presentation-slides-with-html-and-css-2/)[http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-awesome-details-element/](http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-awesome-details-element/) [](http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-presentation-slides-with-html-and-css-2/)譯者：蔣宇捷（轉載請標明出處[http://blog.csdn.net/hfahe](http://blog.csdn.net/hfahe)） Jeffrey Way于2011年11月17日 **教程細節** ?概要：HTML5的Details標簽 ?難度：初級 ? 支持的瀏覽器：Chrome 12以上的版本  [下載源代碼](http://tinkerbin.com/4cTRbLfc)[示例](http://tinkerbin.com/4cTRbLfc) ? ? ? 我最喜歡的HTML5新標簽是details元素，它剛剛被集成到Chrome最新的12版中。我將會在今天的快速入門中展示如何來使用它。 ________________________________________ ? ? ? **Details標簽可以用來做什么？** ? ? ? 它本質上允許我們在點擊標簽時顯示和隱藏內容。你一定相當熟悉這種效果，但是直到現在，它總是用Javascript實現的。想象頭部之后有一個箭頭，當你點擊它時，下面的附加信息將會呈現。再次點擊箭頭內容消失。FAQ頁面中經常使用這個功能。 ? ? ? 這兒有此類效果的一個[兩分鐘示例](http://tinkerbin.com/cHRhR0cN)（使用Ctrl+Enter鍵來執行Javascript腳本）。 ? ? ? Details元素允許我們完全拋開Javascript。或者說，它將做到這樣，因為瀏覽器的支持還乏善可陳。  ________________________________________ ? ? ? **一個示例** ? ? ? 現在讓我們深入和學習如何使用這個新標簽。我們從創建一個新的details元素開始。 ~~~ <details> </details> ~~~ ? ? ? 然后，我們需要放入summary的內容。 ~~~ <details> <summary> Who Goes to College? </summary> </details> ~~~ ? ? ? 默認情況下，瀏覽器理解details元素，它里面除了summary標簽外的內容將會被隱藏。讓我們在summary后面添加一個段落。 ~~~ <details> <summary> Who Goes to College? </summary> <p> Your mom. </p> </details> ~~~ ? ? ?? ? ? ? 好，讓我們開始一些更實用的例子。我想要使用details元素顯示不同的Nettuts+文章。我們首先為每一篇文章創建一個標記。 ~~~ <details> <summary>Dig Into Dojo</summary> <img src="http://d2o0t5hpnwv4c1.cloudfront.net/1086_dojo/dojo.jpg" alt="Dojo" /> <div> <h3> Dig into Dojo: DOM Basics </h3> <p>Maybe you saw that tweet: “jQuery is a gateway drug. It leads to full-on JavaScript usage.” Part of that addiction, I contend, is learning other JavaScript frameworks. And that’s what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction. </p> </div> </details> ~~~  ? ? ? 下一步，我們將為它加上簡單的樣式。 ~~~ body { font-family: sans-serif; } details { overflow: hidden; background: #e3e3e3; margin-bottom: 10px; display: block; } details summary { cursor: pointer; padding: 10px; } details div { float: left; width: 65%; } details div h3 { margin-top: 0; } details img { float: left; width: 200px; padding: 0 30px 10px 10px; } ~~~ ? ? ? 注意，為了方便，我展示的是內容顯示的時候。但是當頁面加載時，你將只會看到summary文本。 ? ? ? 如果你想要默認顯示這樣的狀態，需要把openattribute添加到details元素里：<details open>。 ? ? ??[查看最終結果.](http://tinkerbin.com/4cTRbLfc) ________________________________________ ? ? ? **結語** ? ? ? 這是一個相當簡單的效果，但是展示出有這樣一個通用的內建特性是非常棒的事情。在我們確定所有的瀏覽器里都可以使用details元素之前，你可以使用[polyfill](https://github.com/manuelbieh/Details-Polyfill)來提供支持。最后要注意的一件事：在這篇文章寫作時，還不支持使用鍵盤控制內容的切換。這可能是一個未來潛在的問題。