如何实现侧边栏高亮

大家好，我是IT修真院郑州分院第8期学员，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网JS-8任务中可能会使用到的知识点：

HTTP状态码有哪些？分别代表是什么意思？

1.背景介绍

任务6-10我们需要实现一个侧边栏高亮，下面我们看一种实现方法。


2.知识剖析

用到的知识

ng-repeat
用ng-repeat写出一级和二级菜单。

用到的知识
ng-class
                 <ion-list>
                     <ion-item ng-repeat="project in projects"
                        ng-click="selectProject(project, $index)"
                        ng-class="{active: activeProject == project}">
                         {{project.title}}
                     </ion-item>
                 </ion-list>
            

根据projects循环创建ion-item，当activeProject为当前循环到的project时，增加active样式。

3 常见问题

4 解决方案

5.编码实战

PPT

视频

实现方法
打开状态：

                 <button ng-click="vm.toggleList($index)" ></button>
                 <ul ng-show="vm.first== $index">  <ul>

                   vm.first=$window.sessionStorage.getItem('first');
                   vm.toggleList= function (x) {
                    vm.first= (vm.first == x)? undefined:x;
                    };
            

点击提取序号，让对应序号的ul列表显示出来，如果点击同一个，使其变成undefined，隐藏UL

一级菜单高亮：
                 <button ng-click="vm.toggleList($index)"
                ng-class="{current:vm.first ==$index}" ></button>
            

序号会存到session里面，然后给相应序号的一级菜单加 current类名

二级菜单高亮：
                 <li class="second text-center" ng-repeat="y in x.second"
                ng-class="{active: vm.second === y.title}" >
                <a ng-click="vm.currentList(y.title ,$parent.$index)">{{y.title}} </a>

                </li>

        

            vm.currentList = function (y,index) {
            vm.second=y;
            $window.sessionStorage.setItem('first',index);
            $window.sessionStorage.setItem('second',y)
            };
             
点击二级菜单，传title和父级$index的值，存到session里面，给同title的二级菜单加active类名

6.扩展思考

7.参考文献

8 更多讨论

1.

ng-class使用

<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>  

当isA为true时，增加A样式；当isB为true时，增加B样式；当isC为true时，增加C样式。

2.

ng-repeat使用

表达式定义了如何循环集合。
表达式实例规则:
x in records
(key, value) in myObj
x in records track by $id(x)

3.

ng-show使用

ng-show 指令在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素。

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台 。

每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；

所有task均是从真实项目中提炼出来的技能点，

强调实战演练+自学优先+师兄辅导的学习方式，

严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑！

点击官网注册  官网 ，使用师兄邀请链接有优惠。