简介
Amaze UI 是一个针对 HTML 5 开发的轻量级、模块化、移动优先的跨屏前端框架,通过拆分、封装了一些常用的网页组件,比如轮播图框、文字框等等组件,让前端开发者只用复制代码便可以将这些跨屏的组件写入自己的网页中,而不需要自己在开发的过程中重写一遍。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | < title >折叠面板</ title >< 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 > </ 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-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'}" >Menu < i class = "am-icon-bars" ></ i ></ button > < nav >< ul id = "collapse-nav" class = "am-nav am-collapse" > < li >< a href = "" >开始使用</ a ></ li > < li >< a href = "" >CSS 介绍</ a ></ li > < li class = "am-active" >< a href = "" >JS 介绍</ a ></ li > < li >< a href = "" >功能定制</ a ></ li > </ ul ></ nav > |
<!–
总结
到此这篇关于AmazeUI 折叠面板的实现代码的文章就介绍到这了,更多相关AmazeUI 折叠面板内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!