MUI-折叠面板效果accordion
2024-09-29 16:45:53
在做开发的过程中我们经经常使用到折叠面板。
那我们来看下折叠面板到底是怎么使用。
废话不多说。
代码粘下来:
<!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 mui-pull-left"></a>
<h1 class="mui-title">折叠面板</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right">折叠标题</a>
<div class="mui-collapse-content">
<p>我是内容1</p>
<p>我是内容2</p>
<p>我是内容3</p>
<p>我是内容4</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
执行结果例如以下所看到的:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
最新文章
- 获取终端ip地址
- 20145220&;20145209&;20145309信息安全系统设计基础实验报告(5)
- windows shell api SHEmptyRecycleBin 清空回收站
- PMBOK学习笔记二-项目管理过程
- #nav li:hover ul 与#nav li a:hover ul 的区别
- vim显示行数
- Linux unzip解压文件到某个目录下面
- JAX-WS
- LogBoy 之Android Studio控制台输出日志太多清空
- MUD江湖_MUD文字游戏_MUD五指_武林群侠_北侠_夺宝江湖_书剑_文字江湖游戏_MUD游戏下载
- Java的Log系统介绍和切换(转)
- [Usaco2008 Feb]Meteor Shower流星雨[BFS]
- PHP初入,(特效的使用)
- Java中的集合框架(下)
- 让自己写的项目支持Cocoapods管理
- c# 集合的长度为什么是可变的
- Linux-逻辑卷LVM
- OSPFv3与OSPF的配置
- hashcode相等两个类一定相等吗?equals呢?相反呢?
- rsync+inotify实现实时同步案例【转】