amazeui折叠面板智能化展开

发布时间:2017-6-29 22:17:53 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"amazeui折叠面板智能化展开 ",主要涉及到amazeui折叠面板智能化展开 方面的内容,对于amazeui折叠面板智能化展开 感兴趣的同学可以参考一下。

2016年12月12日 21:05:18 星期一

场景: 我拿这个组件用作管理后台的侧边栏

效果: 根据当前访问的url不同, 展开不同的面板

amazeui折叠面板

js代码:

 1 <script type="application/javascript">
 2     var nowUrl = 'http://xxxx';
 3     var dls =document.getElementById("sidebar").getElementsByTagName("dl"); //获取所有面板
 4     for (var i = 0; i < dls.length; i++) {
 5         var links = dls[i].getElementsByTagName("a"); //获取每个面板中的a标签
 6 
 7         for (var j=0; j<links.length; j++) {
 8             if (links[j].href == nowUrl.substring(0, nowUrl.length-1)) {
 9                 dls[i].setAttribute('class', 'am-accordion-item am-active');
10                 var dds = dls[i].getElementsByTagName("dd");
11                 dds[0].setAttribute('class', 'am-accordion-bd am-collapse am-in');
12                 break; //如果匹配到, 则跳出整个面板(dl)
13             } else {
14                 //把其它的面板(dl)都收起来
15                 dls[i].setAttribute('class', 'am-accordion-item');
16                 var dds = dls[i].getElementsByTagName("dd");
17                 dds[0].setAttribute('class', 'am-accordion-bd am-collapse');
18             }
19         }
20     }
21 
22 </script>

上一篇:Greenplum各种Tips(不定时更新)
下一篇:我是服务的执政官-服务发现和注册工具consul简介

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。