折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下图结构:
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<!--此处添加内容,形式多样-->
</div>
</li>
</ul>
可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.mui-collapse
类的li
节点上,增加.mui-active
类即可,效果如下:
代码结构如下: