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);

} el {

_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：p id=”ac1″ >

h1>a >七一建党节手抄报一级目录/a>span>/span>/h1>

ul>

li>二级菜单1/li>

li>二级菜单2/li>

/ul>

/p>

p id=”ac2″ >

h1>a >一级目录/a>span>/span>/h1>

ul>

li>二级菜单1/li>

li>二级菜单2/li>

/ul>

/p>

p id=”ac3″ >

h1>a 3″>一级目录/a>span>/span>/h1>

ul>

li>二级菜单1/li>

li>二级菜单2/li>

/ul>

/p>

复制代码

ul{-webkit-transition:all ea 广西南宁学院1s; }

p:target ul{height:400px;}

p: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: “-̶疯狂猜歌三个字歌名0;;}

复制代码缺点：1、不具有互斥性。2、目前还不支持过渡动画效果。

小 结js实现accordion效果，成本高，效率低，目前而言能实现最为丰富的效果。 css3实现accordion效果，成本低，效率高，虽可以实现丰富的动画效果，但不具有二元性。html5实现accordion效果，成本低，效率高，但缺乏动画效果，且不具有互斥性。目前支持的内核有限。

展 望 css3 和 html5 的引入和发展，某种程度上进一步推进结构，样式，行为三者分离的web设计的理念。从而减小表现上对js的依赖，降低网页制作的成本且提高网页运行的效率。 没有理由不期待css3和html5不断完善，假以时日能够提供更为强大的功能。

建 议

在含有内容较多的web app中，基于性能优先的原则，适当优雅降级，采用html5标签实现accordion效果。至少html5doctor作者是比较推崇 wordpress 中采用的。