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片段：

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

实现效果图：

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