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

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：h2一級目錄/h2>

ul id="ac1">

      li>二級菜單1/li>

      li>二級菜單2/li>

      li>二級菜單3/li>

 /ul>

復制代碼

ul{ display:none;}

ul:target{display:block;}

復制代碼示例代碼2：c1">一級目錄/a>/h2>

ul id="ac1">

      li>二級菜單1/li> 

      li>二級菜單2/li> 

      li>二級菜單3/li>

/ul>

h2>2">一級目錄/a>/h2>

ul id="ac2">

      li>二級菜單1/li> 

      li>二級菜單2/li> 

      li>二級菜單3/li>

/ul>

h2>一級目錄/a>/h2>

ul id="ac3">

      li>二級菜單1/li> 

      li>二級菜單2/li> 

      li>二級菜單3/li>

/ul>

復制代碼

ul{ display:none;}

ul:target{display:block;}

復制代碼示例代碼3：div id="ac1" >

h2>a >一級目錄/a>span>/span>/h2>

ul>

      li>二級菜單1/li>

      li>二級菜單2/li>

/ul>

/div>

div id="ac2" >

          h2>a >一級目錄/a>span>/span>/h2>

          ul>

               li>二級菜單1/li>

               li>二級菜單2/li>

          /ul>

/div>

div id="ac3" >

          h2>a 3">一級目錄/a>span>/span>/h2>

          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、不具有二元性。2、過渡動畫高度不可自動獲取。

HTML5 標簽 summary & details

summary & details是HTML5中兩個新標簽，除了具有很強的語義化之外，它還有令人驚喜的動態效果。因此，抓住這一特性，我們也能很容易的制作出輕量級的手風琴效果來。一般來講，應該成對使用這兩個標簽。

 示例代碼1：details>

       summary>一級目錄/summary>  

       ul>

            li>二級菜單/li>

            li>二級菜單/li>

            li>二級菜單/li>

       /ul> 

/details>

復制代碼默認樣式：可以給details添加open屬性，使詳情默認展開。 該標簽目前僅webkit內核支持。

示例代碼2：details>

       summary>一級目錄/summary>  

       ul>

            li>二級菜單/li>

            li>二級菜單/li>

            li>二級菜單/li>

       /ul> 

      details>

            summary>二級菜單/summary>  

           ul>

               li>三級菜單/li>

               li>三級菜單/li>

               li>三級菜單/li>

           /ul> 

      /details>  

/details>

復制代碼說明：可以嵌套使用，形成三級活更多級別菜單。

details summary::-webkit-details-marker {background: red;color: #fff;font-size: 200%;} 

summary::-webkit-details-marker { display: none }

summary:after { content: "+";}

details[open] summary:after {content: "-";}

復制代碼缺點：1、不具有互斥性。2、目前還不支持過渡動畫效果。 

小  結JS實現accordion效果，成本高，效率低，目前而言能實現最為豐富的效果。 CSS3實現accordion效果，成本低，效率高，雖可以實現豐富的動畫效果，但不具有二元性。HTML5實現accordion效果，成本低，效率高，但缺乏動畫效果，且不具有互斥性。目前支持的瀏覽器內核有限。

展 望 CSS3 和 HTML5 的引入和發展，某種程度上進一步推進結構，樣式，行為三者分離的Web設計的理念。從而減小表現上對JS的依賴，降低網頁制作的成本且提高網頁運行的效率。 沒有理由不期待css3和HTML5不斷完善，假以時日能夠提供更為強大的功能。

建 議

在含有內容較多的web app中，基于性能優先的原則，適當優雅降級，采用HTML5標簽實現Accordion效果。至少Html5doctor作者是比較推崇 Wordpress 中采用的。

轉載自：CUBE