zoukankan      html  css  js  c++  java
  • 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>

    效果如下:

  • 相关阅读:
    Data Visualisation Cheet Sheet
    数据预处理
    算法题目
    集成方法
    Mysql数据库重要知识点(知了堂学习心得)
    Working with Data » Getting started with ASP.NET Core and Entity Framework Core using Visual Studio » 创建复杂数据模型
    Working with Data » Getting started with ASP.NET Core and Entity Framework Core using Visual Studio » 排序、筛选、分页以及分组
    Working with Data » 使用Visual Studio开发ASP.NET Core MVC and Entity Framework Core初学者教程
    ASP.NET Core文档中Work with Data章节的翻译目录
    webpages框架中使用Html.TextArea()在前台显示多行信息时,如何进行大小、样式的设置
  • 原文地址:https://www.cnblogs.com/Dark-fire-liehuo/p/10421785.html
Copyright © 2011-2022 走看看