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>

 

目录
相关文章
|
3月前
|
前端开发 JavaScript
鼠标点击展开详情
鼠标点击展开详情
|
8天前
【sgCollapseBtn】自定义组件:底部折叠/展开按钮
【sgCollapseBtn】自定义组件:底部折叠/展开按钮
|
4月前
|
开发工具 索引
点击一个消除游戏图标时,背后都发生了什么
点击一个消除游戏图标时,背后都发生了什么
32 1
|
9月前
|
前端开发 定位技术
Echarts地图高级开发:下钻交互菜单操作按钮(1)
Echarts地图高级开发:下钻交互菜单操作按钮(1)
62 0
|
5月前
展开&收起,使用SwiftUI搭建一个侧滑展开页面交互
展开&收起,使用SwiftUI搭建一个侧滑展开页面交互
63 0
|
6月前
15EasyUI 布局- 创建折叠面板
15EasyUI 布局- 创建折叠面板
31 0
|
9月前
|
UED
产品设计--按钮菜单的优化设计
产品设计--按钮菜单的优化设计
|
9月前
|
存储 Android开发 索引
RecyclerView 折叠/展开功能的实现
最近这一两个周都没有怎么更新 QMUI。因为我一直在搞忙于搞微信读书的讲书界面。沉醉于写 bug 和改 bug 之中。
348 0
【分享】宜搭子表单点击新增自动展开最后一项,折叠前面所有项.
宜搭子表单点击新增自动展开最后一项,折叠前面所有项. by 页一
668 0
【分享】宜搭子表单点击新增自动展开最后一项,折叠前面所有项.
html+css实战190-侧导航布局-箭头
html+css实战190-侧导航布局-箭头
128 0
html+css实战190-侧导航布局-箭头