詳解HTML5應用中accordion三種效果的探索

摘要：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中文網其他相關文章！