这篇文章主要介绍了阿马泽伊折叠面板的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
简介
Amaze UI是一个针对HTML 5开发的轻量级、模块化、移动优先的跨屏前端框架，通过拆分、封装了一些常用的网页组件，比如轮播图框、文字框等等组件，让前端开发者只用复制代码便可以将这些跨屏的组件写入自己的网页中，而不需要自己在开发的过程中重写一遍。
！声明文档类型
html class=’no-js ‘
头
meta charset=’utf-8 ‘
meta http-equiv=’ X-UA-Compatible ‘ content=’ IE=edge ‘
元名称=’描述’内容=’ ‘
meta name=’keywords’ content=’ ‘
meta name=’ viewport ‘ content=’ width=device-width，initial-scale=1 ‘
标题折叠面板/标题
meta name=’ renderer ‘ content=’ WebKit ‘
meta http-equiv=’ Cache-Control ‘ content=’ no-site app ‘/
link rel=’ icon ‘ type=’ image/png ‘ href=’ assets/I/favicon。巴布亚新几内亚
元名称=’支持移动网络应用内容=’是’
link rel=’ icon ‘ size=’ 192 x192 ‘ href=’ assets/I/app-icon 72 x72 @ 2x。巴布亚新几内亚
meta name=’ apple-mobile-we b-app-capable ‘ content=’ yes ‘
meta name=’ apple-mobile-we B- app-状态栏-style ‘ content=’ black ‘
meta name=’ apple-mobile-we B- app-title ‘ content=’ Amaze UI ‘/
link rel=’ apple-touch-icon-pre composed ‘ href=’ assets/I/app-icon 72 x 72 @ 2x。巴布亚新几内亚
meta name=’ ms application-tile image ‘ content=’ assets/I/app-icon 72 x72 @ 2x。巴布亚新几内亚
meta name=’ ms应用程序-磁贴颜色’ content=’ # 0e 90d 2 ‘
link rel=’样式表’ href=’ assets/CSS/amaze ui。量滴’ CSS ‘
/头
body style=’ margin:50px；’
！-折叠面板-
div class=’ am-panel-group ‘ id=’ accordion ‘
‘ am-panel am-panel-默认’
div class=’am-panel-hd ‘
H4 class=’ am-panel-title ‘ data-am-collapse=’ { parent:’ # accordion ‘，target: ‘#do-not-say-1’} ‘
标题
/h4
/div
div id=’ do-not-say-1 ‘ class=’ am-panel-collapse am-collapse am-in ‘
div class=’am-panel-bd ‘
阅谁问君诵，水落清香浮
/div
/div
/div
‘ am-panel am-panel-默认’
div class=’am-panel-hd ‘
H4 class=’ am-panel-title ‘ data-am-collapse=’ { parent:’ # accordion ‘，target: ‘#do-not-say-2’} ‘
标题
/h4
/div
div id=’ do-not-say-2 ‘ class=’ am-panel-collapse am-collapse ‘
div class=’am-panel-bd ‘
阅谁问君诵，水落清香浮
/div
/div
/div
‘ am-panel am-panel-默认’
div class=’am-panel-hd ‘
H4 class=’ am-panel-title ‘ data-am-collapse=’ { parent:’ # accordion ‘，target: ‘#do-not-say-3’} ‘
标题
/h4
/div
div id=’ do-not-say-3 ‘ class=’ am-panel-collapse am-collapse ‘
div class=’am-panel-bd ‘
阅谁问君诵，水落清香浮
/div
/div
/div
/div
！-折叠菜单-
button class=’ am-BTN am-BTN-primary ‘ data-am-collapse=’ { target:’ # collapse-nav ‘ } ‘菜单I class=’ am-icon-bar ‘/I/button
航行
ul id=’ collapse-nav ‘ class=’ am-nav am-collapse ‘
lia href=’ ‘开始使用/a/李
lia href=”CSS介绍/a/李
李主动a href=JS介绍/a/李
lia href=’ ‘功能定制/a/李
/ul
/导航
！-折叠列表-
ul class=’ am-list admin-sidebar-list ‘ id=’ coll apase-nav-1 ‘
李
a data-am-collapse=’ { parent:’ # coll apase-nav-1 ‘ } ‘ href=’ #/’ I class=’ am-icon-home am-margin-left-sm ‘/I首页/a
/李
李
a data-am-collapse=’ { parent:’ # coll apase-nav-1 ‘，target: ‘#user-nav’} ‘
I class=’ am-icon-users am-margin-left-sm ‘/I人员管理I=’ am-icon-angle-right am-fr am-margin-right ‘/I
/a
ul class=’ am-list am-collapse admin-sidebar-sub ‘ id=’ user-nav ‘
lia href=’ #/userAdd ‘ I class=’ am-icon-user am-margin-left-sm ‘/I添加人员/a/李
lia href=’ #/userList/0 ‘ I class=’ am-icon-user am-margin-left-sm ‘/I人员列表/a/李
/ul
/李
李
a data-am-collapse=’ { parent:’ # coll apase-nav-1 ‘，target: ‘#company-nav’} ‘
I class=’ am-icon-table am-margin-left-sm ‘/I单位（部门)管理I=’ am-icon-angle-right am-fr am-margin-right ‘/I
/a
ul class=’ am-list am-collapse admin-sidebar-sub ‘ id=’ company-nav ‘
lia href=’ #/company add ‘ span class=’ am-icon-table am-margin-left-sm ‘/span添加单位（部门)/a/李
lia href=’ #/company list/0 ‘ span class=’ am-icon-table am-margin-left-sm ‘/span单位（部门)列表/a/李
/ul
/李
李
data-am-collapse=’ { parent:’ # coll apase-nav-1 ‘，target: ‘#role-nav’} ‘
I class=’ am-icon-table am-margin-left-sm ‘/I角色管理I=’ am-icon-angle-right am-fr am-margin-right ‘/I
/a
ul class=’ am-list am-collapse admin-sidebar-sub ‘ id=’ role-nav ‘
lia href=’ #/role add ‘ span class=’ am-icon-table am-margin-left-sm ‘/span添加角色/a/李
lia href=’ #/roleList/0 ‘ span class=’ am-icon-table am-margin-left-sm ‘/span角色列表/a/李
/ul
/李
/ul
！- [if (gte IE 9)|！(IE)]！-
脚本src=’ assets/js/jquery。量滴js ‘/脚本
！- ![endif] –
！-[如果lte IE 8 ]
脚本src=’ assets/ie8/jquery。量滴js ‘/脚本
script src=’ assets/ie8/modernizr。js ‘/脚本
脚本src=’ assets/js/amaze ui。ie 8聚填充。量滴js ‘/脚本
！[endif] –
脚本src=’ assets/js/amaze ui。量滴js ‘/脚本
/body
/html
总结
到此这篇关于阿马泽伊折叠面板的实现代码的文章就介绍到这了，更多相关阿马泽伊折叠面板内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www。jb51。net/html 5/740963。超文本标记语言
