摘要：Accordion（手風(fēng)琴，又名"抽屜"）效果，因其收展樣式形如手風(fēng)琴而得名。通過(guò)層級(jí)關(guān)系，在信息展示和頁(yè)面布局上，達(dá)到巧妙的平衡。因此，廣泛運(yùn)用于Web以及App交互設(shè)計(jì)中。在以往的項(xiàng)目中Accordion通常是由JavaScript編碼實(shí)現(xiàn)。本次分享，著重探索兩種不依靠JS，采用純CSS3或HTML5來(lái)實(shí)現(xiàn)其效果。并對(duì)其優(yōu)缺點(diǎn)作初步的對(duì)比。

傳統(tǒng)JS實(shí)現(xiàn)方式

1、原生JavaScript

2、調(diào)用JS庫(kù)文件，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;    });

復(fù)制代碼缺點(diǎn)：效率低，成本高，行為和樣式耦合緊密。

CSS3 偽類：target

target 是 CSS3 中新增的偽類之一。其能通過(guò)錨點(diǎn)，為目標(biāo)元素添加指定的樣式。因其頁(yè)面中錨點(diǎn)的唯一性，能實(shí)現(xiàn)互斥的輪換效果。

示例代碼1：h1一級(jí)目錄/h1>

ul id="ac1">          li>二級(jí)菜單1/li>          li>二級(jí)菜單2/li>          li>二級(jí)菜單3/li>     /ul>

復(fù)制代碼

ul{ display:none;}    ul:target{display:block;}

復(fù)制代碼示例代碼2：c1">一級(jí)目錄/a>/h1>

ul id="ac1">          li>二級(jí)菜單1/li>           li>二級(jí)菜單2/li>           li>二級(jí)菜單3/li>    /ul>    h1>2">一級(jí)目錄/a>/h1>    ul id="ac2">          li>二級(jí)菜單1/li>           li>二級(jí)菜單2/li>           li>二級(jí)菜單3/li>    /ul>    h1>一級(jí)目錄/a>/h1>    ul id="ac3">          li>二級(jí)菜單1/li>           li>二級(jí)菜單2/li>           li>二級(jí)菜單3/li>    /ul>

復(fù)制代碼

ul{ display:none;}    ul:target{display:block;}

復(fù)制代碼示例代碼3：div id="ac1" >

h1>a >一級(jí)目錄/a>span>/span>/h1>    ul>          li>二級(jí)菜單1/li>          li>二級(jí)菜單2/li>    /ul>    /div>    div id="ac2" >              h1>a >一級(jí)目錄/a>span>/span>/h1>              ul>                   li>二級(jí)菜單1/li>                   li>二級(jí)菜單2/li>              /ul>    /div>    div id="ac3" >              h1>a 3">一級(jí)目錄/a>span>/span>/h1>              ul>                   li>二級(jí)菜單1/li>                   li>二級(jí)菜單2/li>              /ul>    /div>

復(fù)制代碼

ul{-webkit-transition:all ease 1s; }     div:target ul{height:400px;}    div:target span{-webkit-transform:rotate90deg);}

復(fù)制代碼Css3 偽類：targetl 缺點(diǎn)：1、不具有二元性。2、過(guò)渡動(dòng)畫高度不可自動(dòng)獲取。

HTML5 標(biāo)簽 summary & details

summary & details是HTML5中兩個(gè)新標(biāo)簽，除了具有很強(qiáng)的語(yǔ)義化之外，它還有令人驚喜的動(dòng)態(tài)效果。因此，抓住這一特性，我們也能很容易的制作出輕量級(jí)的手風(fēng)琴效果來(lái)。一般來(lái)講，應(yīng)該成對(duì)使用這兩個(gè)標(biāo)簽。

示例代碼1：details>

 summary>一級(jí)目錄/summary>             ul>                li>二級(jí)菜單/li>                li>二級(jí)菜單/li>                li>二級(jí)菜單/li>           /ul>     /details>

復(fù)制代碼默認(rèn)樣式：可以給details添加open屬性，使詳情默認(rèn)展開。 該標(biāo)簽?zāi)壳皟Hwebkit內(nèi)核支持。

示例代碼2：details>

  summary>一級(jí)目錄/summary>             ul>                li>二級(jí)菜單/li>                li>二級(jí)菜單/li>                li>二級(jí)菜單/li>           /ul>           details>                summary>二級(jí)菜單/summary>                 ul>                   li>三級(jí)菜單/li>                   li>三級(jí)菜單/li>                   li>三級(jí)菜單/li>               /ul>           /details>      /details>

復(fù)制代碼說(shuō)明：可以嵌套使用，形成三級(jí)活更多級(jí)別菜單。

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: "-";}

復(fù)制代碼缺點(diǎn)：1、不具有互斥性。2、目前還不支持過(guò)渡動(dòng)畫效果。

小 結(jié)JS實(shí)現(xiàn)accordion效果，成本高，效率低，目前而言能實(shí)現(xiàn)最為豐富的效果。 CSS3實(shí)現(xiàn)accordion效果，成本低，效率高，雖可以實(shí)現(xiàn)豐富的動(dòng)畫效果，但不具有二元性。HTML5實(shí)現(xiàn)accordion效果，成本低，效率高，但缺乏動(dòng)畫效果，且不具有互斥性。目前支持的瀏覽器內(nèi)核有限。

展 望 CSS3 和 HTML5 的引入和發(fā)展，某種程度上進(jìn)一步推進(jìn)結(jié)構(gòu)，樣式，行為三者分離的Web設(shè)計(jì)的理念。從而減小表現(xiàn)上對(duì)JS的依賴，降低網(wǎng)頁(yè)制作的成本且提高網(wǎng)頁(yè)運(yùn)行的效率。 沒(méi)有理由不期待css3和HTML5不斷完善，假以時(shí)日能夠提供更為強(qiáng)大的功能。

建 議

在含有內(nèi)容較多的web app中，基于性能優(yōu)先的原則，適當(dāng)優(yōu)雅降級(jí)，采用HTML5標(biāo)簽實(shí)現(xiàn)Accordion效果。至少Html5doctor作者是比較推崇 WordPress 中采用的。