006_跨平台开发_MUI_折叠面板（accordion）

来源：互联网发布：淘宝店招牌尺寸编辑：程序博客网时间：2024/05/18 03:14

视频教程：点击这里

认识

折叠面板从二级列表中演化而来，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架构师

视频教程：点击这里

源码下载

关注下方的微信公众号，回复：006_折叠面板（accordion）.code

欢迎加入交流群：451826376

更多信息：www.itcourse.top

完整教程PDF版本下载

阅读全文

0 0