详细操作见代码：

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

效果如下：

Accoridion折叠面板的更多相关文章

  1. amazeui折叠面板智能化展开

    2016年12月12日 21:05:18 星期一 场景: 我拿这个组件用作管理后台的侧边栏 效果: 根据当前访问的url不同, 展开不同的面板 amazeui折叠面板 js代码: <script ...

  2. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  3. jQuery EasyUI 折叠面板accordion的使用实例

    1.对折叠面板区域 div 设置 class=”easyui-accordion” 2.在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性). 3.设置面板属 ...

  4. Vue 折叠面板Collapse在标题上添加组件后，阻止面板冒泡的用法

    iView组件中,折叠面板Collapse点击面板标题部分,会出现面板收起或展开的效果.那么在面板标题后面再添加下拉框之类的组件时,会出现跟面板点击一样的效果,这时候就需要阻止冒泡的用法了.具体代码: ...

  5. element-ui Collapse 折叠面板源码分析整理笔记（十）

    Collapse 折叠面板源码: collapse.vue <template> <!--一组折叠面板最外层包裹div--> <div class="el-co ...

  6. 修改mui accordion（折叠面板）默认展开收缩行为

    mui的折叠面板 accordion 默认展开收缩逻辑是,展开其中一个的同时收缩起同级已经展开的元素. 实际需求:展开其中一个不必收缩同级元素. 分析mui.js源代码: window.addEven ...

  7. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  8. layui中折叠面板的使用

    运用折叠面板后 可以让页面更加整洁 有什么不懂的可以留言 代码放到底部 需要引入的文件 JQuery代码: html代码 <div class="layui-colla-item&qu ...

  9. Jquery Accordion 折叠面板

    属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...

随机推荐

  1. nohup ./startWebLogic.sh >out.log 2>&1 & 解析

    在启动weblogic的时候我们经常看到如下的命令: nohup ./startWebLogic.sh >out.log 2>&1 & 从09年开始用weblogic到现在 ...

  2. python使用http、https代理

    在国内利用Python从Internet上爬取数据时,有些网站或API接口被限速或屏蔽,这时使用代理可以加速爬取过程,减少请求失败,Python程序使用代理的方法主要有以下几种: (1)如果是在代码中 ...

  3. Activiti开发案例之activiti-app更换数据源

    前言 由于Activiti 默认使用的数据库是H2数据库,重启服务后相关数据会丢失.为了永久保存,所以要配置关系型数据库,这里我们选择 SqlServer ,有钱任性. 环境 Activiti6,Sq ...

  4. SpringCloud（6）分布式配置中心Spring Cloud Config

    1.Spring Cloud Config 简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组 ...

  5. svn 钩子应用 - svn 提交字符限制, 不能为空

    一.版本库钩子 1.1 start-commit  开始提交的通知 输入参数:传递给你钩子程序的命令行参数,顺序如下: 1．  版本库路径 2．  认证过的尝试提交的用户名 3．  Depth,mer ...

  6. redis info

    redis命令详细文档可参考:http://redisdoc.com/index.html info命令显示redis详细的状态信息. 命令的基本用法有三种: 1)info:部分redis状态统计信息 ...

  7. [转帖]Ansible批量远程管理Windows主机(部署与配置)

    2018-09-12 12:04:42 https://blog.51cto.com/7424593/2174156 一.测试环境介绍 Ansible管理主机: 系统:   CentOS6.8 IP ...

  8. SpringBoot配置devtools实现热部署

    spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot应用. devtool ...

  9. 2019-04-03 研究EasyWeb有感

    今天从往常睡到11点多才起床的状态中一下子转回9点前起床,起床第一件事就是开始研究这框架 1. 根据这框架的说明,首先搭建IDEA开发环境,下载.破解:当从EasyWeb官网下载了两个框架(一个是前端 ...

  10. java 中的基本数据类型

    1,  变量 Java是强类型语言, 对于每一种数据都定义了类型,基本数据类型分为数值型,字符型,布尔型.数值型又分为了整型和浮点型. 整型又分为byte, int, short long. 浮点型又 ...