1.折叠面板
<!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><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><ul class="mui-table-view"><li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">面板2</a><div class="mui-collapse-content"><p>面板2子内容</p></div></li></ul><ul class="mui-table-view"><li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">面板3</a><div class="mui-collapse-content"><p>面板3子内容</p></div></li></ul>
</body>
</html>
点击前的效果:点击后的效果:
注:可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.mui-collapse类的li节点上,增加.mui-active类即可
需要使用css文件和js文件