快捷導(dǎo)航

angular實現(xiàn)導(dǎo)航菜單切換

更新時間：2022年03月25日 14:03:32 作者：maoer9999

這篇文章主要為大家詳細介紹了angular實現(xiàn)導(dǎo)航菜單切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了angular實現(xiàn)導(dǎo)航菜單切換的具體代碼，供大家參考，具體內(nèi)容如下

js部分：

$scope.navArr=[{
? ? ? ? task:{
? ? ? ? ? ? title: "我的任務(wù)",
? ? ? ? ? ? showAdd: true,
? ? ? ? ? ? data:[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title:'我的設(shè)計院',
? ? ? ? ? ? ? ? ? ? id:1,
? ? ? ? ? ? ? ? ? ? hasChild:false,
? ? ? ? ? ? ? ? ? ? active:true,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title:'我加入的設(shè)計院',
? ? ? ? ? ? ? ? ? ? id:2,
? ? ? ? ? ? ? ? ? ? hasChild:true,
? ? ? ? ? ? ? ? ? ? active:false,
? ? ? ? ? ? ? ? ? ? data:[
? ? ? ? ? ? ? ? ? ? ? ? {title:"設(shè)計院1",active:true},
? ? ? ? ? ? ? ? ? ? ? ? {title:"設(shè)計院2",active:false}
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title:'驗證消息',
? ? ? ? ? ? ? ? ? ? id:3,
? ? ? ? ? ? ? ? ? ? hasChild:false,
? ? ? ? ? ? ? ? ? ? active:false,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? title:'我參與的設(shè)計院',
? ? ? ? ? ? ? ? ? ? id:3,
? ? ? ? ? ? ? ? ? ? hasChild:true,
? ? ? ? ? ? ? ? ? ? active:false,
? ? ? ? ? ? ? ? ? ? data:[
? ? ? ? ? ? ? ? ? ? ? ? {title:"設(shè)計院3",active:true},
? ? ? ? ? ? ? ? ? ? ? ? {title:"設(shè)計院4",active:false}
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ]
? ? ? ? }
? ? ? ? }];
? ??
? ? $scope.showItem=false;
? ? $scope.showId=null;
? ? //給菜單項添加事件
? ? $scope.changNavMenu=function(item,arr,hasChild){
? ? ? ? for(let i of arr){
? ? ? ? ? ? if(i==item){
? ? ? ? ? ? ? ? i.active=true;
? ? ? ? ? ? ? ? showNav(hasChild,i.id)
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? i.active=false;?
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? function showNav(hasChild,id){
? ? ? ? if($scope.showId!=id){
? ? ? ? ? ? $scope.showItem=false;
? ? ? ? ? ? $scope.showId=id;
? ? ? ? }
? ? ? ? if(hasChild){
? ? ? ? ? ? if($scope.showItem==false){
? ? ? ? ? ? ? ? $scope.showItem=true
? ? ? ? ? ? }else if($scope.showItem==true){
? ? ? ? ? ? ? ? $scope.showItem=false
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? // 給二級菜單添加點擊事件
? ? $scope.changTwoNav=function(item,arr){
? ? ? ? for(let i of arr){
? ? ? ? ? ? if(i==item){
? ? ? ? ? ? ? ? i.active=true;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? i.active=false;?
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? event.stopPropagation();
? ? }

html片段：

<div class="two_level_box">
? <!-- title -->
? <p class="menu-title">{{navArr[0].task.title}}</p>
? <!-- add -->
? <div class="add-pro-btn" ng-if="navArr[0].task.showAdd">
? ? <span>+ 快速立項</span>
? </div>
? <!--一級菜單-->
? <ul class="navMenu">
? ? <li ng-click="changNavMenu(item,navArr[0].task.data,item.hasChild)" ng-class="{active:item.active}" ng-repeat="item in navArr[0].task.data">
? ? ? <a href=""><b ng-class="{b_active:showItem&&item.active}" ng-if="item.hasChild"></b> {{item.title}}</a>
? ? ? <ul class="subMenu closeSubMenu" ng-class="{true:'subMenu',false:'closeSubMenu'}[showItem&&item.active]">
? ? ? ? <li ng-if="item.hasChild" ng-class="{active:i.active&&item.active}" ng-click="changTwoNav(i,item.data)" ng-repeat="i in item.data">
? ? ? ? ? ? <a href="">{{i.title}}</a>
? ? ? ? </li>
? ? ? </ul>
? ? </li>
? </ul>
? </ul>
</div>

css:

.two_level_box{
? float:left;
? width: 139px;
? height: 100%;
? background: #fff;
}
.menu-title{
? margin:10px;
}
.add-pro-btn{
? cursor: pointer;
? margin:10px;
}
.add-pro-btn span{
? display: inline-block;
? width:100%;
? text-align: center;
? border:1.5px solid #EE6133;
? border-radius: 20px;
? padding:2px;
? color:#EE6133;
}
.navMenu>li>a{
? margin:8px 0;
? padding:10px;
}
.navMenu>li{
? margin:8px 0;
? padding:0;
}
.navMenu li a{
? color:#000;
}
.navMenu>.active>a{
? color:#EE6133;
}
.subMenu .active{
? background-color: #FACFC1;
? border-right:2px solid #EE6133;
}
.closeSubMenu{
? display: none;
}
.subMenu li{
? padding:5px 0;
? border-right:2px solid #fff;
}
.subMenu li a{
? padding-left:30px;
}
.navMenu b{
? display: inline-block;
? width:8px;
? height:0;
? border-left:5px solid #A9A9A9;
? border-top:4px solid transparent;
? border-bottom:4px solid transparent;
}
.navMenu .b_active{
? border-top:5px solid #A9A9A9;
? border-left:4px solid transparent;
? border-right:4px solid transparent;
}

實現(xiàn)效果圖：