折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下:
~~~
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板</a>
<div class="mui-collapse-content">
<p>面板2子内容</p>
</div>
</li>
<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>
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse mui-active">
<a class="mui-navigate-right" href="#">面板1</a>
<div class="mui-collapse-content">
<p>面板1子内容</p>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">面板</a>
<div class="mui-collapse-content">
<p>面板2子内容</p>
</div>
</li>
<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>
~~~
可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.mui-collapse类的li节点上,增加.mui-active类即可;mui官网中的方法说明,使用的就是折叠面板控件。
- mui
- 拓展
- 本地存储
- 获取时间
- 滚动帧听
- ui组件
- accordion(折叠面板)
- actionsheet(操作表)
- badge(数字角标)
- button(按钮)
- cardview(卡片视图)
- checkbox(复选框)
- dialog(对话框)
- 图片轮播
- 输入增强
- list(列表)
- 遮罩蒙版
- media list(图文列表)
- numbox(数字输入框)
- 侧滑导航
- 弹出菜单
- picker(选择器)
- popPicker
- dtpicker
- progressbar(滚动条)
- radio(单选框)
- range(滑块)
- scroll(区域滚动)
- slide(轮播组件)
- switch(开关)
- 手机底层
- 蜂鸣提示音和手机震动
- 设备信息
- 手机信息
- 电话
- 发送短信
- 消息框
- 浏览器打开网页
- 界面
- 手势
- 轮播组件
- 底部导航
- 打开新页面
- 遮罩
- webview详解
- js基础
- 数组
- mui教程
- 教程— html5+ webview 底部栏用法详解(二)(转载)
- 自动弹出虚拟键盘
- Native.js示例汇总