折叠面板的改进【Amaze UI】

最新推荐文章于 2024-04-02 05:55:40 发布

VIP文章 Wendy-lxq

最新推荐文章于 2024-04-02 05:55:40 发布

阅读量4.7k

点赞数 1

分类专栏： Amaze UI 文章标签： html javascript 移动 Amaze UI

本文链接：https://blog.csdn.net/u010297791/article/details/52764463

版权

折叠面板或者说折叠列表在移动端的使用非常广泛，不仅可以让页面渲染地更简洁，而且使用起来也是很大方，很实用。在做项目的过程中，我应用到了这个功能，进行了改进并应用，接下来详细讲解。

结果展示：

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="#/">

最低0.47元/天解锁文章

Wendy-lxq

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
折叠面板的改进【Amaze UI】

折叠面板或者说折叠列表在移动端的使用非常广泛，不仅可以让页面渲染地更简洁，而且使用起来也是很大方，很实用。在做项目的过程中，我应用到了这个功能，进行了改进并应用，接下来详细讲解。结果展示：html页面代码： Title
复制链接

扫一扫