angular实现导航菜单切换

本文实例为大家分享了angular实现导航菜单切换的具体代码，供大家参考，具体内容如下

js部分： 

$scope.navArr=[{
        task:{
            title: "我的任务",
            showAdd: true,
            data:[
                {
                    title:'我的设计院',
                    id:1,
                    hasChild:false,
                    active:true,
                },
                {
                    title:'我加入的设计院',
                    id:2,
                    hasChild:true,
                    active:false,
                    data:[
                        {title:"设计院1",active:true},
                        {title:"设计院2",active:false}
                    ]
                },
                {
                    title:'验证消息',
                    id:3,
                    hasChild:false,
                    active:false,
                },
                {
                    title:'我参与的设计院',
                    id:3,
                    hasChild:true,
                    active:false,
                    data:[
                        {title:"设计院3",active:true},
                        {title:"设计院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片段：

  
  
{{navArr[0].task.title}}
  
  

    + 快速立项
  
  
  

    

       {{item.title}}
      

        

            {{i.title}}
        
      
    
  
  

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;
}

实现效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。