• Accoridion折叠面板


    详细操作见代码:

    <!doctype html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="css/mui.min.css" rel="stylesheet" />
            <style type="text/css">
                .mui-icon-eye.mui-active{
                    
                }
            </style>
        </head>
    
        <body>
            <header class="mui-bar mui-bar-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title">折叠面板</h1>
            </header>
            <div class="mui-content">
                <h5 class="mui-content-padded">二级列表</h5>
                <div class="mui-card">
                    <div class="mui-table-view">
                        <!--
                            mui-collapse:产生折叠效果
                            mui-collapse-content:折叠后里面的内容
                        -->
                        <div class="mui-table-view-cell mui-collapse">
                            <a href="" class="mui-navigate-right">折叠面板</a>
                            <div class="mui-collapse-content">
                                这里是折叠隐藏内容
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mui-card">
                    <div class="mui-table-view">
                        <!--
                            标题栏:mui-table-view-divider
                        -->
                        <div class="mui-table-view-divider">
                            FQA 帮助中心*(标题栏)
                        </div>
                        <div class="mui-table-view-cell mui-collapse">
                            <a href="" class="mui-navigate-right">登录表单</a>
                            <div class="mui-collapse-content">
                                <div class="mui-input-row">
                                    <label>账号</label>
                                    <input type="text" class="mui-input-clear" placeholder="请输入你的账号">
                                </div>
                                <div class="mui-input-row">
                                    <label>密码</label>
                                    <input type="password" class="mui-input-password" placeholder="请输入你的密码">
                                </div>
                                <div class="mui-button-row">
                                    <button type="button" class="mui-btn mui-btn-blue">取消</button>
                                    <button type="button" class="mui-btn mui-btn-blue">登录</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mui-table-view-cell mui-collapse">
                                <a href="" class="mui-navigate-right">菜单一</a>
                                <div class="mui-collapse-content">
                                    <p>好嗨哟!感觉人生已经到达了高潮,感觉人生已经到达了巅峰</p>
                                </div>
                            </div>
                            
                            <div class="mui-table-view-cell mui-collapse">
                                <a href="" class="mui-navigate-right">菜单二</a>
                                <div class="mui-collapse-content">
                                    <p>好嗨哟!感觉人生已经到达了高潮,感觉人生已经到达了巅峰</p>
                                </div>
                            </div>
                            
                            <div class="mui-table-view-cell mui-collapse">
                                <a href="" class="mui-navigate-right">菜单三</a>
                                <div class="mui-collapse-content">
                                    <p class="mui-ellipsis">好嗨哟!感觉人生已经到达了高潮,感觉人生已经到达了巅峰</p>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
            
            
            
            
            <script src="js/mui.min.js"></script>
            <script type="text/javascript">
                mui.init()
            </script>
        </body>
    
    </html>

    效果如下:

  • 相关阅读:
    Linux网络连接图标不见了
    使用fiddler4实现手机抓包的相关配置
    selenium之 时间日期控件的处理
    vue 上传文件示例
    从入门到自闭之Python解释器安装
    从入门到自闭--并发编程
    Python高阶操作--关于数据清洗
    Python高阶操作--数据分析的理解
    python --数据库、网络编程
    python基础
  • 原文地址:https://www.cnblogs.com/Dark-fire-liehuo/p/10421785.html
Copyright © 2020-2023  润新知