这篇文章主要介绍了AmazeUI折叠面板的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
简介
惊艳用户界面是一个针对HTML 5开发的轻量级、模块化、移动优先的跨屏前端框架,通过拆分、封装了一些常用的网页组件,比如轮播图框、文字框等等组件,让前端开发者只用复制代码便可以将这些跨屏的组件写入自己的网页中,而不需要自己在开发的过程中重写一遍。
!声明文档类型
html class='no-js '
头
meta charset='utf-8 '
元http-equiv=' X-UA-兼容'内容='IE=edge '
元名称='描述'内容=' '
元名称='关键字'内容=' '
元名称='视口'内容='宽度=设备宽度,初始比例=1 '
标题折叠面板/title
meta name=' renderer ' content=' web kit '
元http-equiv='缓存-控制'内容='no-siteapp'/
link rel=' icon ' type=' image/png ' href=' assets/I/fav icon。png '
meta name=' mobile-web-app-ability ' content=' yes '
link rel=' icon ' size=' 192 x 192 ' href=' assets/I/app-icon 72 x72 @ 2x。png '
meta name=' apple-mobile-web-app-ability ' content=' yes '
meta name=' apple-mobile-web-app-status-bar-style ' content=' black '
meta name=' apple-mobile-web-app-title ' content='拍案惊奇UI'/
link rel=' apple-touch-icon-precompted ' href=' assets/I/app-icon 72 x72 @ 2x。png '
meta name=' ms application-Tileimage ' content=' assets/I/app-icon 72 x72 @ 2x。png '
meta name=' ms application-TileColor ' content=' # 0e 90d 2 '
链接rel='样式表href=' assets/CSS/amazeui。量滴' CSS '
/head
body style=' margin: 50px '
!-折叠面板-
div class=' am-panel-group ' id=' accordion '
div class=' am-panel am-panel-default '
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
div class=' am-panel am-panel-default '
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
唐山网站制作lt ./div