如何实现侧边栏高亮

一、背景介绍

侧边栏高亮是指选择侧边栏菜单时有一个样式效果,当刷新页面的时候,这个效果还在.

---

二、知识剖析

侧边栏高亮有很多种实现方法.目前大部分是使用localStorage和sessionStorage来实现

---

三、常见问题

如何实现高亮的?

---

四、解决方案

侧边栏高亮有很多种实现方法,

在复盘项目中，我使用判断当前url和点击选项的url来实现子模块的状态保存。

html为

< uib-accordion close-others= "oneAtATime" class= "menu-list" >

< div class= "ng-binding organlist-head" ui-sref= "home.welcome" >

< img class= "bank" src= "../img/bank.png" > 后台首页

</ div >

< div class= "panel-default" ng-repeat= "manage in manages" >

< button name= "parentBtn" type= "button" class= "gray" ng-click= "Turn($index)" >{{manage.text}}

< img class= "tool" src= "../img/tool.png" >

< img class= "right" ng-class= "{transform:turn}" src= "../img/right.png" >

</ button >

< div uib-collapse= "collapse[$index]" class= "organul" >

< button ng-repeat= "item in manage.content" ng-click= "Turnli($event,$index)" ng-class= "{'organCheck':currentUrl == item.url}" class= "organli"

ui-sref= "{{item.url}}" >{{item.text}} </ button >

</ div >

</ div >

</ uib-accordion >

js为

//状态保存

let currentUrl = $location. path(); //获取当前路由

currentUrl = currentUrl. replace( / \/ / g, '.'); //正则替换掉斜杠

currentUrl = currentUrl. slice( 1) //删除最前面的斜杠

$scope. currentUrl = currentUrl;

至于父模块的状态保存，由于父模块没有跳转，所以需要通过sessionStorage

$http({

method: 'get',

url: '/a/admin/users/getUserModules'

}). then( function ( res) {

console. log( res);

$scope. manages = res. data. data;

//1为收缩，0为展开

let open = JSON. parse( sessionStorage. getItem( 'open')); //定义一个控制展开的open

if ( open === null) { //如果open为null，即无存储

$scope. collapse = function () {

console. log( $scope. manages. length);

let arr = [];

for ( let i = 0; i < $scope. manages. length; i++) { //根据父模块个数添加个数

arr[ i] = 1;

}

return arr;

}();

} else {

$scope. collapse = JSON. parse( sessionStorage. getItem( 'open')); //获取展开的数据

}

})

//点击设置展开状态

$scope. Turn = function ( index) {

$scope. collapse[ index] ? $scope. collapse[ index] = 0 : $scope. collapse[ index] = 1;

sessionStorage. setItem( 'open', JSON. stringify( $scope. collapse));

if ( this. turn == true) {

this. turn = false; //控制箭头转向

} else {

this. turn = true;

}

}

---

五、编码实战

腾讯视频

---

六、拓展思考

侧边栏高亮还有哪些实现方法?

---

七、参考文献

location的用法

---

八、更多讨论

A1.通过url判断的方法会不会有什么问题？

Q1：暂时我没有发现什么问题，主要是使用起来有限制，必须有跳转

A2：localStorage和sessionStorage在这里有什么差别？

Q2：其实是没什么差别的，无非就是local保存的话，退出浏览器后重进也能保存之前的状态

A3：location还有其他的用法吗

Q3：有的，用法很多，所以建议大家可以去看下我的参考文献中贴的链接