zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    POJ 1320 Street Numbers(佩尔方程)
    hdu 3292 No more tricks, Mr Nanguo
    佩尔方程
    hdu 4825 xor sum(字典树+位运算)
    Xor Sum 2(位运算)
    数串
    EJS
    JQuery性能优化
    常用正则
    JavaScript prototype继承中的问题
  • 原文地址:https://www.cnblogs.com/iLoveMyD/p/6166018.html
Copyright © 2011-2022 走看看