折叠面板或者说折叠列表在移动端的使用非常广泛,不仅可以让页面渲染地更简洁,而且使用起来也是很大方,很实用。在做项目的过程中,我应用到了这个功能,进行了改进并应用,接下来详细讲解。
结果展示:
html页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--自动适应移动屏幕-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--优先使用webkit内核渲染-->
<meta name="renderer" content="webkit">
<!--不要被百度转码-->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>Title</title>
<!--以下才是引入amazeui资源-->
<link href="css/amazeui.css" rel="stylesheet">
<link href="css/折叠面板.css" rel="stylesheet">
<!--引入js的时候要注意,必须先引入jQuery,再引入amazeui,因为这个框架是基于jQuery开发的-->
<script src="js/jquery-3.1.0.min.js" language="JavaScript" charset="utf-8"></script>
<!--以下才是引入amazeui资源-->
<script src="js/amazeui.js" language="JavaScript" charset="utf-8"></script>
</head>
<body>
<ul class="am-list admin-sidebar-list" id="collapase-nav-1">
<li class="am-panel">
<a data-am-collapse="{parent: '#collapase-nav-1'}" href="#/">