-
[散修弟子]Android-8110
利用状态来判断是否高亮是对的,但是既然学习angularjs框架,就不推荐用JQ了,还是用angular来实现吧,我来说下我的思路:
首先导航栏是用ng-repeat生成,导航栏分为一级菜单和二级菜单,二级菜单默认隐藏 用ng-show显示和隐藏,一级菜单和二级菜单都有一个ng-class来判断是否高亮。
当点击当前项一级菜单时,其他项菜单的ng-show改成false,这里用到angular.forEach遍历数组的ng-show状态,当前的改为true,即显示这一项的菜单其他的隐藏。点击一级菜单时ng-class改为高亮。
当点击二级菜单时,先用forEach遍历数组,把其他菜单的高亮取消。。和二级高亮取消。然后把当前的二级菜单改成高亮。
然后是刷新也保持当前的菜单高亮,用到session或者cookie,保存数组,以后每次进入页面先判断保存的数组有,有则用保存的数组,就可以实现刷新也高亮了。
可能我说的不清楚,看下代码吧
<ul class="nav navbar-nav">
<li ng-repeat="x in nav">
<div ng-click="first()" class="li" ng-class="{'head-highlight':x.state,'head-highlight-reset':x.highlightReset}">
<span class="glyphicon glyphicon-pencil pencil"></span>
<span class="accordion-toggle">{{x.first}}</span>
<span class="glyphicon fr fc-ff pdr15" ng-class="x.state?'glyphicon-chevron-down':'glyphicon-chevron-left'"></span>
</div>
<ul ng-show="x.state">
<li ng-repeat="y in x.second"
ui-sref="{{y.url}}"
ng-click="second()"
ng-class="{'li-highlight':y.state}"><a href="#">{{y.name}}</a></li>
</ul>
</li>
</ul>//导航栏
$scope.nav =
[
{
first: "后台管理",
state: false,
highlightReset: false,
second: [
{name: "模块管理", url: "", state: false,},
{name: "角色管理", url: "", state: false,},
{name: "密码修改", url: "", state: false,},
{name: "账户管理", url: "", state: false,}
]
},
{
first: "信息管理",
state: false,
second: [
{name: "公司列表", url: "", state: false,},
{name: "职位列表", url: "", state: false,},
]
},
{
first: "内容管理",
state: false,
second: [
{name: "Article列表", url: "navBar.article", state: false,},
]
}
];
//一级菜单点击
$scope.first = function () {
// (this.show===false) ? this.show = true : this.show = false;
if (this.x.state === false) {
//先将全部重置为没有选中状态.实现点击这一个,另一个收回侧边栏
angular.forEach($scope.nav, function (x) {
x.state = false
});
//将此选项状态改为选中
this.x.state = true;
}
else {
//将此选项状态改为没有选中
this.x.state = false
}
this.x.highlightReset = false;
};
//二级菜单点击
$scope.second = function () {
angular.forEach($scope.nav, function (x) {
x.highlightReset = false;
angular.forEach(x.second, function (y) {
y.state = false
})
});
this.y.state = true;
this.x.highlightReset = true;
sessionStorage.setItem("nav", JSON.stringify($scope.nav))//保存当前数组即保存当前高亮的状态
};
if (JSON.parse(sessionStorage.getItem("nav")) != null) {
$scope.nav = JSON.parse(sessionStorage.getItem("nav"))
}//刷新页面时获取保存的数组使高亮保持一致编辑于2019-01-11
- 去第 页