amazeui折叠面板智能化展开
2016年12月12日 21:05:18 星期一
场景: 我拿这个组件用作管理后台的侧边栏
效果: 根据当前访问的url不同, 展开不同的面板
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>