MUI中的accordion(折叠面板)

折叠面板从二级列表中演化而来,dom结构和二级列表类似,代码如下:

   

<ul class="mui-table-view">
	<li class="mui-table-view-cell mui-collapse">
		<a class="mui-navigate-right" href="#">Item 1</a>
		<div class="mui-collapse-content">
			<!-- 第1个面板中的内容 -->
		</div>
	</li>
	<li class="mui-table-view-cell mui-collapse">
		<a class="mui-navigate-right" href="#">Item 2</a>
		<div class="mui-collapse-content">
			<!-- 第2个面板中的内容 -->
		</div>
	</li>
	<li class="mui-table-view-cell mui-collapse">
		<a class="mui-navigate-right" href="#">Item 3</a>
		<div class="mui-collapse-content">
			<!-- 第3个面板中的内容 -->
		</div>
	</li>
</ul>
可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.mui-collapse类的li节点上,增加.mui-active类即可;mui官网中的方法说明,使用的就是折叠面板控件。 

你可能感兴趣的:(MUI中的accordion(折叠面板))