摘要：Accordion（手風琴，又名"抽屜"）效果，因其收展樣式形如手風琴而得名。透過層級關係，在資訊展示和頁面佈局上，達到巧妙的平衡。因此，廣泛運用於Web以及App互動設計中。在以往的專案中Accordion通常是由JavaScript程式碼實作。本次分享，著重探討兩種不依賴JS，採用純CSS3或HTML5來實現其效果。並對其優缺點作初步的比較。
傳統JS實作方式
1、原生JavaScript
2、呼叫JS函式庫文件，jQuery、jQuery Mobile
$'.menu_lev1').clickfunction) {
var _this=$this),
_next=_this.next);
if _next.is':visible')) {
$'.menu_lev1').removeClass'on');
$'.menu_lev2').slideUp600);
_this.addClass'on');
_next.slideDown600);
} else {
_next.slideUp600);
_this.removeClass'on');
}
return true;
});複製程式碼缺點：效率低，成本高，行為和樣式耦合緊密。
CSS3 偽類別：target
#target 是 CSS3 中新增的偽類別之一。其能透過錨點，為目標元素新增指定的樣式。因其頁面中錨點的唯一性，能達到互斥的輪換效果。
範例程式碼1：h1一級目錄/h1>
ul id="ac1">
li>二级菜单1/li>
li>二级菜单2/li>
li>二级菜单3/li>
/ul>複製程式碼
ul{ display:none;}
ul:target{display:block;}複製程式碼範例程式碼2：c1">一級目錄/a>/ h1>
ul id="ac1">
li>二级菜单1/li>
li>二级菜单2/li>
li>二级菜单3/li>
/ul>
h1>2">一级目录/a>/h1>
ul id="ac2">
li>二级菜单1/li>
li>二级菜单2/li>
li>二级菜单3/li>
/ul>
h1>一级目录/a>/h1>
ul id="ac3">
li>二级菜单1/li>
li>二级菜单2/li>
li>二级菜单3/li>
/ul>複製程式碼
ul{ display:none;}
ul:target{display:block;}複製程式碼範例程式碼3：div id="ac1" >
h1>a >一级目录/a>span>/span>/h1>
ul>
li>二级菜单1/li>
li>二级菜单2/li>
/ul>
/div>
div id="ac2" >
h1>a >一级目录/a>span>/span>/h1>
ul>
li>二级菜单1/li>
li>二级菜单2/li>
/ul>
/div>
div id="ac3" >
h1>a 3">一级目录/a>span>/span>/h1>
ul>
li>二级菜单1/li>
li>二级菜单2/li>
/ul>
/div>複製程式碼
ul{-webkit-transition:all ease 1s; }
div:target ul{height:400px;}
div:target span{-webkit-transform:rotate90deg);}複製程式碼Css3 偽類：targetl 缺點：1、不具有二元性。是HTML5中兩個新標籤，除了具有強烈的語義化之外，它還有令人驚喜的動態效果。輕量級的手風琴效果來。
屬性，使詳情預設為展開。三級活更多等級選單。成本高，效率低，目前而言能達到最豐富的效果。效率高，但缺乏動畫效果，且不具互斥性。者分離的Web設計的概念。
##建議在含有內容較多的web app中，基於效能優先的原則，適當優雅降級，採用HTML5標籤實現Accordion效果。
以上是詳解HTML5應用中accordion三種效果的探索的詳細內容。更多資訊請關注PHP中文網其他相關文章！