138.尚硅谷_JS基础_二级菜单-完成基本功能

的类的操作，那以后就是注意啊，我们以后去开发的时候，能改类呢，尽量去改类，不能改类的时候我们再去用这个style，就是换句话说，让我们这个GS和这个CSS1定要足够的干嘛呀，分离啊，一定要足的分离，那这个东西说完了，我们来看一个这个练习啊练习练习呢，我们这有一个这个DEMO，我们来先看它这个效果吧，还是用我这个火狐打开吧，就是一样啊，打开以后呢，是这么一个叫做一个二级菜单的一个练习，什么叫二级菜单呢？诶首先你会发现我这个整个菜单它有两层，这是一层，然后这是不是一小层啊，那这个我们叫一级菜单，这叫做一个二级菜单，如果它下边还有个叫三级彩单是吧？诶一级级的叫做一个二级彩单，那现在这什么效果呢？诶你看现在我这块你会发现只有第一个是展开的，剩下那三个是不是都是叠起来的呀？诶那当我一点第一个咔。它是被叠起来了呀，诶我一点第二个，第二个是不是展开了呀，我点第一个，诶是不是第一个展开，第二个叠起来了，哎就是这么一个效果啊，这么一个二级菜单，这个练习呢，其实看着怎么感觉怎么样，难吗？这其实特别简单，那么特别简单呢，你看它怎么就长，怎么就叠起来了，怎么就展开了。

怎么就叠起来了，是不是高度变了呀，你高度高了是不是展开了，高度矮了是不是就叠起来了，实际要所有的操作都是在修改它这个高度啊，再修改这个高度好，那这块呢，是我们说做好这功能啊不然后呢，我们再来打开一个什么呢？诶我们这块有一个没做好的这个N这块我给它粘过来啊，CTRLC把它粘到我们这个页面里，CTRLV，诶你这就有这种恍然大悟的感觉是吧，就是这样是吧，叫用日语叫苏内是吧，对苏内一种恍然大悟的感觉啊，这是我们这个二级菜单。这里边儿运行呢，现在来看我们这个页面啊，这个页面里边也比较简单，有些样式我们就不管了啊，样式不管了，诶然后呢，再往下边是整个是一个大的这个div，我这些所有材料是不是都在这个大的div里边啊，大的div里边有一个一个小的div来看有几个啊，一个两个三个。

四个是不是一共有四个div啊，哎，四个大div为什么有四个呀，我是不是一共有1234个菜单啊，哎，所以一个点位对应一个菜单，你看着啊，我给删一个，最后给他删了我给你保存。哎，我我保存我删了也没用，因为我没运行它啊，没运行它是不就最后一个就没了呀，诶最后一个就没了啊，所以注意一个div就对应一个菜单，我再删一个，我一保存走，你你放心是不就少一个，诶删一个少一个啊所以注意这一个div就是一个这个二级菜单，那这二级菜单是谁呀？其实我叠的是是什么呀，就是这个div，我在展开的时候也是展开的这个谁呀，这个div啊，这个div就是我们这个二级的菜单啊，二级的菜单好那这块看完了，那我们来看它是怎么叠起来的啊，但是现在我们来运行的是这个啊，我来保存一下，保存我在这一刷新这个呢，是没有功能的，你这玩意儿点完了都干嘛呀，是不是都没反应啊？哎，没有实现任何功能的啊，没有实现任何功能的，我们就来照着它来实现，那现在我们来看你会发现什么呢？你会发现我这一展开这个菜单里边，它有展开的，还有干嘛呀，叠起来的是吧？哎，那注意啊，我展开还有叠起来的都是我的那个div，也就是说我这个div有展开的还。

它要叠起来，为什么又展开又叠起来，来我们来看啊，你看这个第一个div是我的那个什么呀，展开的是吧，第二个div是我们呀，叠起来的，它们有什么区别。有什么区别，哎，是不是多了一个class呀？哎，第二个div多了一个class，叫做一个club club什么意思，折叠啊折叠，那我们来看看，我把这class给它删了，第二个我给它删了，我一保存一刷新走，你第二个是不是也开了，哎，也开了，我把这给它加上来，然后呢，CTRLC我给第一个也加上，是不是都有了呀，我这一刷新走，你是不是也叠起来了，诶我就发现什么呢？当一个div有collaps的这个类的时候，这个div就干嘛呀。

是不是就合起来了呀，没有这个类的时候，这个div是不是就是展开了呀，你像我第一个div没有，我这一保存一刷新是不是展开了呀，其他div有是不是就点起来了呀，你会发现我让这个菜单展开还是折叠，实际上都是在什么呀。是不是在修改这个类啊，你希望它展开，把这类给它去掉，你希望它叠起来，把这类给它加上，诶，那这个类怎么这么神奇，说叠就叠呢，来我们看看啊，它怎么就神奇了，咱们看一下它这个外部的CS文件啊，里边有些图片你都不用管，直接看他这个CSS，点开这个CSS搜一下，我们来CTRLF搜一下这一个CS的查找，诶，在这。

害什么呀？25，诶，所以为什么叠起来，就是因为你加了APS以后，这个元素的高度变成多少了，变成25了，你一变成25，那多余的部分是不是就就不显示了啊，就这么叠起来的啊，所以注意它是通过这个clas来操作的啊，操作的其他的我们就不多看了啊，就不多看了，所以这里边我们来说一下这块的一个功能，来一个script的标签，这里边呢，我们来写一个这个window，点一个unload，等于一个function，诶我们来说一下我们什么呢？我们来说一下刚才我们看到东西啊，我们的这个每一个这个二级菜单，呃，每一个这个菜单啊，每一个菜单都是一个什么呀？Div啊，都是一个div，有几个div，是不是有几个菜单啊？哎，有几个菜单，那我们说了，当有一个类叫什么呢？叫做class，诶有一个类叫class，当什么呢？当我们这个div具有这个class的这个类史，我们的div什么呢？Div就是什么呀，就是。

我们这个折叠的状态吧，哎，当什么呢？当我们div没有，哎这个类史，我们这个什么呢？Div就是一个什么呀，展开的一个状态吧，哎，所以你想要叠起来还是展开，实际上就是对这个类进行。操作啊，对这个类进行操作，好，那现在这个大概的一个页面我们看完了，那接下来我们来实现功能吧，怎么去实现这功能啊，首先我们来看第一个功能，其实就一个功能是吧，那比如说这块现在我希望一点它干嘛呢？一点它我就给它。叠起来吧，诶一点它我就给它叠起来，所以这里边我们来干嘛呢？叫什么呢？叫做点击我们这个菜单来干嘛呢？来切换我们这个菜单的一个显示状态啊，切换我们菜单显示状态，那这块我要先干嘛呀，点击菜单，我是是要先找到菜单给它绑定单击项函数，哎单击项函数，那现在我们来看这个结构，一个菜单里边结构比较简单，Div里边放了一个SPASPA里边放了一堆超链接是吧？哎，SPA里边放了一超链接，这死SPA呢，什么在线工具呀，支持我们呀，SPA实际上是什么呀，是不是就是我们这个标题呀，哎，这个标题啊，这个菜单里标题，诶那整个它是一个div，我这个标题呢，这是一个这个SPA，那注意了，我们绑定事件的时候有两个选择，一个是绑定给div，还有一个是绑定给SPA。

诶，我们是要绑定单机项函数啊，那问题来了，那这里边我们的单机项函数应该绑定给谁？我是绑定给div还是绑定给败？诶咱们先说绑定给行不行？行，但是绑定div有什么问题，这整个是不是都是一个div啊？诶我这一点打开了没问题吧，但是注意那整个都是一个div，我一点它是不是也会触发我那个div单价是吧？那我一点它会导致什么呀？是不是叠起来了，那这事儿就就比较奇怪了，我一点咔展开了，我这一点它咔叠起来了，好像这堆链接是不是都不让我点一样，诶都瓣点一样，所以注意我们这个单击响应函数应该绑定给我们的span啊，应该绑定给我们这个SPA span呢，我们来看看，那我要既然要绑定span，所以接下来我要干嘛呀，我们要获取这些SPA啊，那这些span我们来看有什么特点？

诶，SPA有个叫做一个SPA是吧，那我能不能通过来获取，获取我们这个所有的这个class，为这个menu span的这个元素直接来一个挖一个menu span就直接写了，怎么获取，根据class获取怎么获取，表示什么？诶盖ALEX100内，但是那个方法有个问题，兼容不兼容I8，我需要兼容八，诶是我们这个query select是select还是select，哦，哎哦，因为我们是不是有多个元素，所以直接query select哦，这里边我们需要传一个点，一个menu SPA一定注意它需要的是一个CSS选择器，这个点是必须的，如果你不写点是不是变成元素氧器了，所以大家注意啊，这个点是必须的，好，我们来看看有没有直接来一个。

Alert一个这个menu SPA点一个length，反映一下长度应该是四个是吧，我一刷新是不是四个呀，好，SPA就获取到了，那接下来呢，诶，我们是要为我们这个死SPA去绑定我们这个单机响应函数，哎，单机响应函数直接来一个负循环，Y一个I等于零，然后I小于我们这个menu SPA menu span点一个LIS，然后来一个I加加这一块，我来一个什么呢？来一个menu SPA中括号I点一个on click等于一个function等于function，我这来写一个alert，一个这个hello，然后一保存，咱们来看刷新这一点是不是hello啊，诶一点是不是hello啊，诶单击响应函数，我们就给它绑定，绑定完了啊绑定完了，那接下来呢，单击响应函数，绑定完了，接下来要干嘛了？

哎，假设我一点它，我是不应该把它给收起来啊，哎，把它叠起来，那注意的是谁叠的是div还是死败div吧，死SPA它就这么大个，你没得叠它叠的是整个是把整个div是不是叠起来呀？诶但是现在我们这个单机响应函数是给span绑定的吧，也就是说我这块有一个Z代表的是谁span z代表的是我当前点击的span吧，哎，这次代表我，哎当前点击的这个span，而我们要获取的是谁呀？

我是不是要获取个div啊，如果我点的这个SPA，我就要操作这个div了，我点的这个span，我是不是要操作这个div啊，那我们来看SPA和div什么关系，是父子关系啊，哎，那我能不能通过它来获取它的这个父元素，诶，来获取我们当前这个子SPA的一个复元素，来一个直接画一个pit parent div等于一个z.parent node是不是获取当前元素的负元素啊，那这个div就是什么？是不是就是我们点的那个div位啊，也就是我们要操作那个div位吧，哎，那假设现在我一点它，我希望把它干嘛呢？我希望给它关上，那怎么办。我是不是给它添减小高度多麻烦呀，我们是不是给它添加一个classs是不是行了呀，把那个什么呀，把那个cos的那个类是不是给它加上就行了呀？诶所以来干嘛呢？我们来操作我们这个来关闭我们这个parent div，诶来什么呢？那我需要给加class，加class那这玩意挺麻烦的，那最好干嘛呀，是不是把我们写的那个兔子给他引引进来啊哎，来一个我们这个squi的标签，Sscript标签，我们这来一个这个SLC来一个兔点GS，然后呢，在这我就可以用了，叫什么呀，叫做一个诶I的class来什么呢？Parent。

哎，Div div，然后我要添加的那个类叫做一个。是不是class的呀，诶classs啊，我这复制，然后给它粘贴过来，那这样当我一点的时候，它是不是给我们这个元素加上一个class的呀，我这一加它是不是就叠起来了，哎，叠起来了啊，刚来一刷新一点走你。就OK了，诶你看这玩意儿非常零是吧，诶高科技是吧，诶加这个类以后，它就立刻就叠起来了，诶立刻就叠起来了，为什么？就是因为那个类的高度是25，哎就叠起来啊就叠起来了，但是注意我这么写行不行，正确行不行啊这块我就属于蒙你们的对吧，点点点点干嘛了，是不只能叠起来打不开了呀，哎，那这玩意不行，那所以艾特class行不行。

不行，你你加上以后是不是打不开了，那我一想来什么呀，木行不行啊木来看我一刷新走你走你走你诶是不是很高科技是吧，都开了吧，但是呢，走走走走是就合不上了，所以注意我这用I用可用remove干嘛呀都不行，你用I永远给你添加，你用remove永远都是给你删除，你写哪个是不是都是写死了呀？哎都是写死了，那我怎么办呀。

我希望的是什么效果呀，如果你是打开的，我就给你关上，如果你是关闭的，我是不是给你打开呀，那这块我应用谁呀？是不是应该用我这个过class，诶to过plus是不是切换这个类啊，如果你有这个类我就给你删了，如果你没有我就给你加上吧，诶加上啊一保存咱们再一刷新走走走走走走。是不是就OK了呀，哎，就OK了，你看这功能是不是就非常简单了，哎，非常简单了啊，我们这个菜单的一个展开，还有这个关闭，当然现在还比较还比较愣是吧，咱们待会儿再做这个什么呀，过渡过渡效果那先不管它啊，好，那这块切换完了，但是注意了这一段能看懂吧，你让它展开还是关闭，实际上就是切换它这个APS这个类加上就。

叠起来移除就展开啊，通过切换这个类来达到我们的菜单的展开，还有折叠这么一个效果，但是这块你要注意一个问题啊，你要看它这个细节这个问题啊，看这这是我们做好这个，做好这个什么特点你要看啊，现在我第一个是不是打开了呢？来我现在干嘛呢，点开第二个我一点。我给你点，我给你点干嘛了，我一它是不是同时只会有一个打开呀，我打开一个之前那个是不是同时就就关上了，而我们现在这个呢，一打一打是不是都能打开啊，哎，当然我们这也挺好的是吧？哎这挺好的，但是这里边注意了，就是根据具体需求来了，那现在我们就有这么一个需求，同时只能有一个打开的，那这块怎么办。同时只能有一个打开的，那咱们现在假设这种情况，现在我第一个是不是打开了呢？现在我一点开第二个，那这个时候我应该干嘛，我是不应该关闭第一个呀，哎，我要关闭第一个，所以干嘛呢？所以在这儿我应该做一件事儿叫什么呢？诶叫做打开我们这个，诶菜单以后叫什么呀？打开我们这个菜单以后应该什么呢？应该关闭之前打开的那个菜单吧，诶应该关闭之前打开的菜单，那问题来了，关闭菜单好关，怎么关呀？

直接给他添加那个class，这class是不就行了，诶添加class就行了，问题是什么呀？关谁呀，换句话说，我之前打开的那个菜单它。是谁呀？我是不是不知道啊，那没法关呀，那怎么办？诶那我们先来看我这一上来默认谁是打开的，是不是第一个呀，哎，那所以干嘛呢，我在外边来定义一个变量，哎，定义一个这个变量来干嘛呢？来保存我们这个什么呀，当前打开的那个什么呀，诶当前打开的那个菜单直接来一个哇，一个open open div打开的那个div吧，等于谁呀，应该。

是不是第一个呀，第一个我来一个menu SPA来一个零，是不是他是不是他这是第一个SPA吧？哎，我们要找的是谁呀？是第一个div，那这个第一个div应该是他的什么呀？是负素，哎叫做parent noe，这个是不是就表示我们第一个div呀？所以注意我创建了一个变量，用来保存当前打开菜单，为什么设置第一个，因为我们一上来默认是不是就是第一个打开的呀？诶所以我来获取第一个div，那现在我要关的是谁？是不是就是它呀？啊就是它啊所以这块注意打开的同时我要干嘛呢？关闭怎么关闭，直接来一个I的class，是不是添加一个类啊，诶来一个这个什么呀，Open的div添加谁呢？添加这个classs，我这一加它是不是就关上了啊，就关上了啊，我这一保存，咱们来看效果一刷新，现在是不是它俩开着呢，诶我这一点走你。

就关上了，我一点他走，你是关上了，我再一点走，你是关上OK了吗？OK了吗？再一点再一点再一点他是打不开了呀，有什么问题哎，我这是不是写死了，你这设置成它以后，那是不是永远都是它了呀，那当这个什么时候呢？这样我一点它，它是不是就关上了，此时open的div是谁了？是第二个了吧，我在点它是不是div是不是第三个了呀，而你现在这个open div是不是。一直没变呀，哎，一直没变，那所以我应该干嘛，我这已经把这个div给它关上了，它就不是打开的了，所以在这我应该干嘛呀，我应该修改我们这个open div，为什么呢？为当前打开的这个什么呀菜单啊，为当前打开单我怎么改呀，直接来一个open div等于谁呢？等于我们这个parent div，我说让它俩相等啊，为什么等于parent div，因为我们现在操作的是它了，诶让它等于它，那这样是不是确保我们这个open div总是那个最新的那个，诶最新那个啊再看效果，我这一保存，一刷新，再一点，再一点，再一点，再一点再一点是不就OK了，诶这样就没有问题了啊，就没有问题，但是还是要看一下啊，还有没有什么其他问题来，那现在呢，我现在刚才点第二个，点第三个点第四个都没事是吧，点第一个也没事，大家注意我再点一下第一个，我一点。

关上了对吧。再点。

再点开开。诶，开不开了，哎呀。刷新一下点能关上是吧，再点，哎呀开不开了，这咋回事？诶首先我们先分析这种情况，一上来我第一个div它是没有那个APS那个类吧，诶当我一点击它的时候，我是不是给它给它加上了呀？诶给它加上，那我们来看当我一点击它的时候，给它通过plus，因为开始没有我是不是给它加上了，加上了以后，然后这注意此时我的open div和panda的div它们是什么？是同一个吧，你注意一上来我的open的div是不是就是第一个呀？哎，我一点，我是不是还点第一个呀，此时open的div和div它本身就是相同的，好，那现在我关上以后呢，注意了，我给它加上一个class，这又加了一遍，有没有影响？

没有吧，以后加了一遍有我是不是就不加了呀，又加了一遍，然后这来了一个open div等于div，那这俩它本来就是什么呀，是不是就是一样的呀，那本来就是一样的，所以你这赋值不赋值也没啥意义，但是注意了，再看下一次这个时候我是不是还要点呀，这时候我点的时候，它这里边有没有collaps那个类，有吧，有所以它是才叠上的呀，好，那注意啊，有我这一点偷诶有我1.to干嘛了。我是不是给它去掉了呀，去掉以后我又给它干嘛了，加上了，注意此时open和这个to这个什么呀，还是同一个吧，你这刚去掉又给他干嘛了，加上了你是不是就没用了呀？哎，刚去掉就给它加上了，所以你会发现什么了，这哥们儿干了是不是打不开了呀？哎，为什么呀，一个去一个家，是不是没没写一样啊，没写一样，所以这块就有个问题了，那怎么处理啊？

那我们说了，这什么时候加呀，如果说我的的div和open div他们是同一个，我这东西我还用不用动了。是不就不用动了呀，哎，所以这块我要做一个判断，判断什么呢？判断我们这个open div和这个什么呀，Part div是否相同，直接来一个if，我们这个open，哎，Div干嘛呢，叫做不等于part div，也就是说你两个是不一样的，我是不是才加呀，你俩一样的，我是就不管你了，哎，就不管你了啊这样我一保存，咱们再看这块一刷新一点一点一点一点是不是就OK了呀，诶就加这么一个判断啊，加上一个判断来点开它看别的看别的看别的这一点这一点走走走是就。都没事了，哎，就可以去放心点了啊，所以注意这块我们需要做一个判断，判断它们两个是否是同一个啊，同一元素，好，那我们这块呢，基本的功能就算是给它完成了，换句话说什么叫功能完成了，这东西现在拿过去它能能用了啊，能用了，只不过可能效果还不是很好，待会我们再去优化一下效果啊，优化一下效果，所以你会发现代码总共是不是。

没有几行吧，诶没有几行，所以这也是我们操作class一个方面的之处，你直接通过操作class其实就隐示了操作了很多的那个其他的这个样式啊，方便我们去操作，那接下来我们要做就是让他这个动画有一个什么呀，流畅的一个过渡的一个效果，对吧？哎，过度的效果，我要去操作一个动画，要注意了，我需要加几个动画呀，比如说这我是不是需要加一个动画呀，还有哪需要加呀，当我一点开它的时候，什么效果。我展开需要加一个动画，是不是折叠我还得去。加一个动画呀，哎，所以这块我们要加两个动画，那在这我要在哪加呀，是不是这得加一个呀，还有哪艾特是不是也得加一个过度啊，哎，这两个地方我们都需要使用一个动画去过度，但是其实你会发现这两个动画其实是干嘛呀。

是不是差不多呀，哎，它是差不多的，哎，但是不一样，差不多，但是不太一样，为什么呢？我们希望可以以同样的手法去处理，因为这样我只需要写一个，这个是不是顺着就出来了呀，但是有个问题，它这是to class，这是什么呢？这是爱的class。他俩方法是不是不一样啊，所以我要想使用同一个方式去处理呢，这样还不行，那我现在还是需要使用同一个方式来处理，那我一想我能不能把它也。变成托拉，诶咱们来说一下啊，为了什么呢？为了可以统一处理我们这个动画的这个过渡效果。哎，过渡效果，我希望什么呢？我们希望在这将我们这个爱的class干嘛呢？改为我们这个to class为了什么？就是为了统一处理我们这个动画效果啊，我还是留一个底儿，把这艾特class给他留着，但是给它住了啊，里面有一个印象，我这是改过的，把I的改成Togo的，这用I的没有问题啊，没有问题，但是我希望以后用的时候更好一点，所以我想改成Togo，但是这个Togo我直接改了行不行？

行不行？咱们一保存，咱们看看啊，我这一刷新来，我这是不是给它叠起来了，然后再一点。来再刷新点起来了，我再点。干嘛了，是不是同时给我展开了两个呀，再看啊，是不是同时展开了两个呀，为什么呀，就是因为Togo class这把这个类是不是又给我移除了呀？哎，给移除了吧，也就是说to做用什么呀，如果有我就给你移除，如果没有是不是我就给你加上啊，但是现在我们这儿用不用它移除啊。

不用移除，他唯一要做的工作就是给我们干嘛呀，加上我这不用你实现移除的功能，所以这块注意此处我们的什么呢？此处我们这个狗class不需要干嘛呢？不需要有这个什么呀，移除的这个功能啊，不需要有移除功能，但是这还有那怎么办。那怎么办，那我一想，那如果我一我这个什么呀，Open的div里边如果已经有这个类了。那再到这儿来，是不是就给它移除了呀，那我一想，如果open的div里边已经有这个类了，你就干嘛呀，你就别进。判断是不是就行了呀，这能理解吗？哎，我们希望它只有一个这个什么呀，添加的功能，而不让你干嘛呀移除，所以什么呀，如果你有这个类了，到这儿是不就移除了呀，所以我来一个判断，如果你有这个类，你就不要再进判断了，所以上边我在这再加一个判断，怎么判断来什么呀？Has class来谁呢？叫做open。

Div，然后来什么呢？来个逗号，来一个叫做class，诶，如果你有。如果你有，你还进不进来了，是不是不进来了，什么时候进来没有吧，所以又来什么呀，取个反吧，哎，取个反，然后来什么呀？嗯，是不是行了呀，那这什么效果呀，如果这两个条件两件是并列的，如果什么呢？如果你的open的div和pen的div不同，同时呢，你这个open div里边还没有collaps的这个类，你再进这个判断，这样一进入判断就证明我这个open div里还有没有clas了，肯定没有吧，所以到这儿是不是只剩下添加了，诶就没有这个什么了，就没有这个移除的功能了啊，就没有这功能了，所以为了用它去替换，我们这多加了一个这个判断，就是为了在这两个地方都使用什么呀，Togo plus好处就是待会我们做这个动画效果的时候，可以统一来处理啊，统一来处理，但是这来看跟刚才的效果其实是一样啊，刷新一下点开点开点开点开关上点开。

是不是就没事了，那就没事了啊，所以这块我加这么一个判断，就是为了统一这两个方法啊，统一这两个方法，好，那这块我们这写完了，稍微有一点绕的就是这里啊，这里稍微的看一下，但是现在你可能还不太理解我为什么要换成to，用A不好吗？用at也行，但是我们希望后期呢省点事，你现在即使先用艾也没事，待会我们再改的时候，你知道为什么了啊，就知道为什么了，好这一块呢，我们先停一下。