首页 > 代码库 > 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 =http://www.mamicode.com/= 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>

 

amazeui折叠面板智能化展开