开发者社区> mydcool> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

amazeui折叠面板智能化展开

简介: 2016年12月12日 21:05:18 星期一 场景: 我拿这个组件用作管理后台的侧边栏 效果: 根据当前访问的url不同, 展开不同的面板 amazeui折叠面板 js代码: 1 2 var nowUrl = 'http://xxxx'; 3 var dls =document.
+关注继续查看

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>

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
windows命令查询硬件信息(CMD)
1、查看电脑系统属性:dxdiag命令 2、查看系统信息:systeminfo 3、查询BIOS详细信息:wmic bios 4、查看CPU详细信息:wmic cpu 5、查看CPU型号:wmic cpu list brief 6、查看内存详细信息:wmic memorychip 7、查看内存条数...
6468 0
13岁出道,16岁被小扎看中,19岁成脸书最年轻工程师,如今跳槽谷歌只为了.……
Google版的Siri迎来了一位新“爸爸”,这位年仅21岁的年轻人曾是Facebook史上最年轻的工程师,如今他将帮助Google的语音助手在体验上同Siri正面竞争,后者的负责人则是一位年近50的苹果高管。
1533 0
重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker
原文:重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker [源码下载] 重新想象 Windows 8.1 Store Apps (73) - 新增控件: DatePicker, TimePicker 作者:webabcd介绍重新想象 Windows 8.
1018 0
+关注
mydcool
php相关专家
286
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载