曾幾何時,我們創建可以顯示/隱藏一些內容的小組件時,我們不得不使用Javascript.有時候你可能不得不為這個小功能,下載一個完整的 JS 庫才能達到這個功能效果.為下面的時刻歡呼吧!HTML5提供了創建這種拖拽特點的方法,我們僅僅需要簡單的幾行html代碼就能獲得這種效果(從目前而言,這種效果還依賴于使用的瀏覽器,當然,在不久的將來,這可能不是問題).下面讓我們一起來看看 detail 元素.下面就是規范中的描述The details element represents a disclosure widget from which the user can obtain additional information or controls. WHATWG HTML5 specification 理論上我們可以用它創建那種折疊的小組件,用戶可以有打開和關閉的交互.在 details 我們可以放入我們任何想放入的內容.瀏覽器的支持情況在我們開始之前,實際一點,讓我們看看目前瀏覽器的支持情況,目前只有chrome支持 details 元素.Opera很快就會支持Opera will support it soon,讓我們來用chrome演示這種效果吧. details 的使用方法這里有兩個相關的元素: details 和可選的 讓我們來看下面的代碼: summary Show/Hide me /summary p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. /p /details 你可以通過下面的鏈接察看效果see this in action over at jsbin.這是一個簡單的例子但是可以將效果完美展現的代碼,沒有任何Javascript.OPen 屬性在上面的例子中,在頁面加載的時候內容是隱藏的。我們可以將 detail 默認的視覺屬性通過布爾值作修改，讓其當我們加載頁面的時候是展開的： summary Show/Hide me /summary p Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. /p /details 注意，這里并沒有 closed 屬性，因為只要你移除 open 屬性，執行的就是 closed 屬性效果。 summary 元素 我們已經簡要的看了 的作用。因為它是短語內容，我們可以使用內聯 (inline)標簽 span; 。我們為什么會有這種想法呢？也許這樣子能更方便的通過而外樣式控制顯示效果或者像 spec 建議的那樣：為一個表單元素增加一個 label 標簽。如果他能生效的話，至少能讓我很順手： summary label for= name Name: /label /summary input type= text id= name name= name / /details 常理看，我們點擊 summary 的任何位置都應該展開 detail 元素的內容。但是在這個例子中，我們點擊 summary 并沒有展開內容，因為你點擊的是 label 他會將焦點放到 input 標簽-即使那部分內容被隱藏在 details 標簽。 很明顯，在這點需要更好的聲明，你認為這個地方應該發生什么事情呢？可能某個瀏覽器生產商能看一下這個效果。 details 元素多層嵌套你可以在 details 中嵌套 details ，可以完美的案例查看這個效果： summary Question 1 /summary p strong Pellentesque habitant morbi tristique /strong senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. em Aenean ultricies mi vitae est. /em Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, code commodo vitae /code , ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. a href= # Donec non enim /a in turpis pulvinar facilisis. Ut felis. /p details summary Related documents /summary ul li a href= # Lorem ipsum dolor sit amet, consectetuer adipiscing elit. /a /li li a href= # Aliquam tincidunt mauris eu risus. /a /li li a href= # Lorem ipsum dolor sit amet, consectetuer adipiscing elit. /a /li li a href= # Aliquam tincidunt mauris eu risus. /a /li /ul /details /details 在哪些情況時會用到 details ?FAQ表可能是我們最先涌現的想法。大家經常使用手風琴效果是用在FAQ列表，所以 details 是這一效果的最佳效果。 考慮到這一系列內容，它可能被固定在某一區域，當我們滾動內容的時候。像這樣子？ 你也可以使用 details 來操作博客的評論內容，用戶簡介，下載列表，復雜的表單，或者像規范中描述下面的應用： An example of the details element from the spec實際上，只要你看看我寫的wordpress，會發現有大量的使用 details 的機會。讓我們在評論中了解一下你的觀點和想法。樣式格式化你如何對這個定義樣式？同時，在webkit瀏覽器中我們可以使用偽類樣式 ::-webkit-details-marker。你可以看到這個小的案例： 我們也可以將這個小組件定位。這里是向右浮動的這就是我們初始化效果。 我們如何將默認的組件Icon自定義呢？那就是用 屬性選擇器 (attribute selector),你可以用來檢測 details 元素是打開的還是關閉的，然后為其定義一個合適的背景圖片。我們咋下面的例子中作了一個類似的效果，使用 :after pseudo-element元素定義成我們喜歡的背景圖片： 在上面的例子中，我們使用文本 + 和 - 來定義這個組件的狀態，根據你的設計需要，你可能希望使用 :before來代替 :after，這兩個為類元素都可以使用 image. details的[open]屬性選擇器能創造很多有意思的可能性。因為我們是好醫生，下面是我們裝飾后的效果，下面是截屏效果： Styled details element in Chrome如果我們可以用過css的動畫效果來修飾打開和關閉時的狀態，這樣設計就更完美了，但是目前為止我們還沒有辦法做到這點。不幸的是在我們寫這篇文章的時候， details h還無法通過鍵盤訪問，Steve Faulkner 寫到：Bottom line is, currently no keyboard support and no usable information exposed to assistive technology.自己試一下，如果你使用鼠標打開 details 元素，你可以使用鍵盤到達內容部分，但是你無法使用鍵盤打開和關閉區域。所以目前這并不是理想狀態，不過我們相信這個小國很快會被改進。在我們抱怨其在IE6中無法生效之前，感謝這些聰明的人們，我們可以提供優雅的像狗兼容。這些效果也被列在下面的網站very handy collection of cross-browser polyfills，這兩個都需要 jQuery: details fallback via jQuery by Mathias Bynens Another details alternative, also based on jQuery by Manuel Bieh 更新：感謝的評論。上面的代碼并不是100%可靠，因為他在某些chrome版本下會失敗。你可以使用this Modernizr snippet。我們為何使用這種類型的交互？言歸正傳，為什么會有這個效果在HTML5中？就像其它HTML5的效果，使用這種效果能夠更簡單。比如時間選擇，Date pickers, sliders, progress indicators, 現在這種手風琴效果就可以在不使用JavaScript的情況下更方便實施。誰能想到下一個是什么？如果是 tabs 標簽那就好了。在這篇文章中，我們闡述了如何去使用 details 和 summary 元素。 details 是一個新元素，通過和 summary 元素通過瀏覽器可以創造手風琴的交互效果。目前， details 只能在 Chrome 工作，不過我們期待這會在不久的將來有所改變。這里只有一個css trick我們可以使用 ::-webkit-details-marker,但是我們擁有很多的其它css。讓我們在評論中知道關于 details 元素你在這方面的經驗和想法。中文原文：details 和 summary 元素 英文原文：The details and summary elements 更多編程語言
