MUI常用组件之accordion、actionsheet

（1）accordion折叠面板

可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。

<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>

（2）actionsheet操作表

actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类；

<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
<!-- 可选择菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
        <a href="#">菜单1</a>
        </li>
        <li class="mui-table-view-cell">
        <a href="#">菜单2</a>
        </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#sheet1"><b>取消</b></a>
        </li>
    </ul>
</div>

js片段

mui('#sheet1').popover('toggle');

可以转换成：

(function ($,document) {
$('#sheet1').popover('toggle');

})(mui,document);