认识
- 折叠面板从二级列表中演化而来，dom结构和二级列表类似，如下：
微信公众号：JavaWeb架构师
<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">
<p>面板1子内容</p>
</div>
</li>
</ul>
注意
- 可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。
- 折叠面板布局必须在 mui-content下(不然会有挤压)
- 外层使用 mui-card 包裹产生边缘
代码块激活字符
maccordion
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav"></a>
<h1 class="mui-title">折叠面板（accordion）</h1>
</header>
<div class="mui-content">
<!-- 折叠面板 -->
<!-- 触发代码：maccordion -->
<!--
结构：
div
//第一个折叠内容
-| li
-|a
-|div
-|自定义内容
更多 ……
-->
<ul class="mui-table-view mui-card">
<!-- 第一个折叠内容 -->
<li class="mui-table-view-cell mui-collapse">
<!-- 这个折叠内容的展示内容（mui-navigate-right：三角） -->
<a href="#" class="mui-navigate-right">面板1</a>
<!-- 这个折叠内容的隐藏部分（将来被展开） -->
<div class="mui-collapse-content">
<!-- 隐藏的小项 -->
<p>我是隐藏的内容1</p>
</div>
</li>
<!-- 第二个折叠内容，加了mui-active样式之后，会自动的展开 -->
<li class="mui-table-view-cell mui-collapse mui-active">
<!-- 这个折叠内容的展示内容（mui-navigate-right：三角） -->
<a href="#" class="mui-navigate-right">面板2</a>
<!-- 这个折叠内容的隐藏部分（将来被展开） -->
<div class="mui-collapse-content">
<!-- 隐藏的小项 -->
<p>我是隐藏的内容2</p>
</div>
</li>
</ul>
</div>
</body>
</html>
效果
微信公众号：JavaWeb架构师
源码下载
关注下方的微信公众号，回复：mui_course.code
欢迎加入交流群：451826376
完整教程PDF版本下载
网友评论