# Vue中动态class覆盖原生class的问题

* 抖音：[https://v.douyin.com/rudwKep/](https://v.douyin.com/rudwKep/)
* B站：[https://www.bilibili.com/video/BV1LD4y1s7D1/](https://www.bilibili.com/video/BV1LD4y1s7D1/)

这一个小伙伴发来的bug

现在的问题是

这个下拉的菜单有时候关不上

现在是正常

但是呢当我切换一个界面

我们再回来

大概就关不掉了

点击空白处也不好使

只能去点击上面这个菜单

碰到这种问题呢

我们首先肯定是想到去看一下

他代码的逻辑

是怎么写的

但是呢我去看了一圈竟然发现

他连一个click事件都没有写

大家看

只是呢我发现他有一个这样的属性

还有这个

后来我搜了一下哈

这个啊就是bootstrap的一个属性

所以就意味着它现在啊

这个展开和收起的效果

都是由bootstrap来管理的

所以刚开始看到这呢线索一下就断了

就无从下手了

后来呢我就想了个办法

既然他正常的情况下

可以点击空白处去收起

说明他肯定有

点击事件放在全局了

所以呢我们可以这样选中body

然后在这选event list

然后展开click

大家看有这么多click

然后呢我们先把它展开

我们就一个一个的移除

看看把哪个移除掉之后

他这个点击空白处他就不好使了

比如说我随便移除一个

大家看它还能关闭

我再把它打开

我就移除第一个

大家看这回就没有了

说明啊刚才我移除的那个第一个

就是来管理这个菜单关闭的

我们再刷新一下 （目的是把移除的第一个事件还原回来）

好然后我们把它打开

我们直接点进去第一个

点进去之后呢

我发现它是一个公用的时间绑定的

那我们就在这apply上面打个断点

然后点空白处

走到这之后呢

把断点关掉

单步跳入

我们看走到哪个方法里

然后呢

我们来看一下他这个方法是怎么走的

注意走到这之后呢

他有一个循环

注意他现在循环的这个数组啊open togens

是有直的大家看

然后呢后边我们先不看了哈

我们直接放行

我们把这个

bug复现出来

先点别的地方

然后再回来

好现在就关不掉了对吧

然后我们还是在这打断点

我们再点一下空白处

大家看这个open tons就没有数据了

这个数据

所以他就不会走里边了

所以呢现在就有一点线索了

在有bug的情况下

这个变量是没有数据的

那为什么他没有数据呢

我们重新来走一下这个代码

我们现在放行一下

看在这为什么没找到对吧

大家看走到这了我们单步跳入

走进去之后呢

我们会发现其实他就是在调query selector

我们右键啊把它复制出来copy string contents

然后我们在控制台自己写一个

document.querySelectorAll

然后呢把刚才这个selector拿过来

大概是没有的

那我们再把它的范围扩大一点

我们去掉一些选择

只留一个这个大概就有了

然后呢再加上一些

我就只去掉show吧

大家看 就有了

加上show呢

就没了

也就是说在关不掉的情况下

应该有这么一个元素是有.show的

但是它没有了

哪个元素呢

我们来看这个a标签

大家看正常是没有展开的时候没有

但是我们把它展开的时候呢

它是有一个show 的样式的

这个样式其实就是bootstrap

直接来操作到我们节点来放上去的

比如说当我们展开的时候呢

bootstrap会给这个a标签加一个show

然后点空白的地方呢

它会通过这个.show（配合其他selector拼接）来找到这个a标签

然后去进行关闭操作

但是呢当我们切换页面的时候

注意啊我们切换再回来

大家看现在这个菜单是打开的

但是这个show已经没了

那为什么会这样呢

看到这啊

对vue比较熟的小伙伴可能会猜到

它这个a标签啊有一个动态的class

这里边的条件如果发生变化了

will就会把整个这个

class列表重新渲染

我们来看这个例子

这个例子里面就一个span标签

然后一个切换样式的按钮

代码呢也很简单就是这样

一个span标签

然后呢它有一个静态的样式

还有一个动态的样式

这个动态呢就是一个true和false

然后通过这个按钮来切换它的true/false

我们来看一下啊

现在呢它只有一个static

然后点按钮再看多了一个动态

再点呢动态就没了对吧

然后注意我在这手动加一个样式叫red

大家看它就有红色背景了

但是呢

这个时候我再点按钮切换的时候

注意这个red就丢了

大家看

原因就是啊

我们直接操作到dom节点

加的这个样式

没有被vue记录下来

所以当他再次重新渲染的时候呢

这个red样式就丢了

回到这个呢他也是这样的

所以呢解决这个小伙伴的bug呀

我研究了一下有两个方案

第一个方案就比较快

就是我们呀

无论如何都给他加一个.show

我看了一下

bootstrap没有对这个（.nav-link的）.show

进行页面样式的声明

也就是说：这个show

只是用于js层面的一个判断（标识）

它没有任何样式的声明

所以呢我们给它加上也不会影响样式

大家看我们再来试一下

可以收起

切换回来也没有问题了

因为回来的时候默认他有个show

然后呢bootstrap就可以

找到这个元素顺利的把它关掉了

这是第一种方案

第二种方案呢就是啊

我看了一下他用的这个bootstrap啊

就是原声的这个Boosttrap

其实呢Boostrap是有vue版的Boostrap的

所以呢最理想的是啊

我们采用vue版的bootstrap

然后呢他想用的什么组件

包括这个下拉的组件这里边他都有

Dropdown

它叫b-dropdown

所以呢

如果我们采用这个vue版的bootstrap

我相信这个问题也能得到解决

而且呢应该说会解决的更彻底
