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

最新推荐文章于 2022-08-23 09:58:26 发布

_枸杞子_

最新推荐文章于 2022-08-23 09:58:26 发布

阅读量564

点赞数

分类专栏： MUI_教程版文章标签： mui框架折叠面板

本文链接：https://blog.csdn.net/qq_33605778/article/details/78334915

版权

MUI_教程版专栏收录该内容

10 篇文章 0 订阅

订阅专栏

视频教程：点击这里

认识

折叠面板从二级列表中演化而来，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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
006_跨平台开发_MUI_折叠面板（accordion）

认识折叠面板从二级列表中演化而来，dom结构和二级列表类似，如下：代码结构<ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板1</a> <div cla
复制链接

扫一扫