Javascript 我的汉堡包菜单不是'；在特定页面上没有响应？

我已经用

HTML

、

CSS

和

JavaScript

创建了一个汉堡包菜单。

：hover

似乎工作正常，在某些页面上，过渡动画也工作正常；然而，我最近在一些页面上添加了一个平铺系统（除了全局导航之外，这些页面上唯一的内容），并注意到在检查

DOM

时，

form

元素是主要焦点。然后我更改了

CSS

中几个类的

z-index

，这时菜单停止响应

JavaScript

。我不确定这是否是真正的原因，我已经尝试展开这些更改，看看是什么导致了这个问题，但我似乎无法找到它。因此，我在这里；我想那些比我更有知识的人可能会发现

CSS

的问题，而我并没有看到

---

在输入了这个问题并输入了下面的代码片段后，我似乎无法在这里重现它，我将这里的代码与我网页上的代码进行了比较，所有内容似乎都相同。我真的很茫然，在这里复制失败后，我开始认为它可能是边缘缓存的东西之间的交叉样式，但在

DOM

中进一步检查后，情况似乎并非如此

请随意访问当前存在此问题的地方，并访问下面链接的三个页面中的一个（最好是在移动设备上，或者调整浏览器大小以模拟较小的屏幕以显示菜单）

要与实际发生的情况进行比较，请随意访问该页面或该页面；或者简单地运行下面的代码片段

---

下面的代码片段来自菜单不响应

JavaScript

的页面

var wrapperMenu=document.querySelector（'.hamburger menu'）；
wrapperMenu.addEventListener（'click'，函数（）{
wrapperMenu.classList.toggle（'active'）；
document.getElementById（'globalnav'）.classList.toggle（'active'）；
})

@导入url(https://fonts.googleapis.com/css?family=Varela+圆形）；
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400300600700）；
*，*：：之后，*：：之前{
框大小：边框框；
}
html，正文{
身高：100%；
}
身体{
字体系列：“开放式Sans”，无衬线；
字体大小：16px；
线高：1.5em；
溢出x：隐藏；
}
标题{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：50px；
填充顶部：15px；
背景色：#333；
z指数：3；
}
a、 头衔{
游标：默认值；
颜色：#eee！重要；
显示：无；
文字装饰：无！重要；
字体大小：25px；
字母间距：5px；
左侧填充：25px；
过渡：0.5s全部；
}
导航a{
文字装饰：无！重要；
光标：指针；
颜色：#eee；
字体大小：25px；
字母间距：5px；
左侧填充：25px；
过渡：1s全部；
过渡：0.5s颜色；
}
主动导航{
颜色：#3cf；
}
导航a：悬停{
颜色：#3cf；
}
.主要内容{
位置：相对位置；
宽度：100%；
身高：100%；
边缘顶部：50px；
z指数：1；
}
.集装箱{
宽度：100%；
身高：100%；
显示器：flex；
调整项目：灵活启动；
调整内容：灵活启动；
z指数：2；
}
.瓷砖{
宽度：100%；
身高：100%；
列表样式：无；
显示器：flex；
柔性包装：包装；
调整项目：灵活启动；
证明内容：中心；
z指数：2；
}
.瓷砖{
宽度：200px；
高度：180像素；
边框：1px实心rgba（255、255、255、.05）；
过渡：0.1s；
光标：指针；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
将改变：一切；
}
.瓷砖p{
垫底：0.3em；
}
.tile.title、.tile.amount、.tile.icon{
颜色：#333；
}
.地砖.头衔{
字体大小：16px；
}
.瓷砖.数量{
字体大小：10px；
字号：200；
不透明度：0.7；
}
.tile.icon{
字体大小：40px；
垫底：0.3em；
}
.tile:悬停，.tile.initial{
变换：比例（1.05）平移3d（0,0,0）；
背景色：白色；
边框：1px实心透明；
边界半径：3px；
盒影：-13px 11px 25px 1px rgba（0,0,0,0.55）；
过渡：0.3s；
}
.tile:hover.icon、.tile.initial.icon、.tile:hover.title、.tile.initial.title、.tile:hover.amount、.tile.initial.amount{
颜色：#3cf；
不透明度：1；
}
@媒体屏幕和屏幕（最大宽度：800px）{
导航{
位置：固定；
顶部：50px；
左：0；
宽度：100%；
背景色：#555；
}
导航a{
显示：无；
}
主动导航{
显示：块；
垫面：5px；
垫底：5px；
过渡：1s全部；
}
导航a：悬停{
盒影：1920px 0px rgba（0,0,0,0.25）插页；
文本阴影：-2px25px；
}
a、 头衔{
显示：块；
}
.汉堡包菜单{
位置：固定；
顶部：10px；
右：10px；
z指数：5；
高度：30px；
宽度：30px；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
光标：指针；
过渡：0.75s全部；
}
.hamburger-menu.active{
变换：旋转（-405度）；
过渡：0.75s全部；
}
.汉堡菜单部{
背景色：#eee；
边界半径：5px；
高度：2倍；
过渡：0.75s全部；
}
.汉堡菜单：悬停div{
背景色：#fc3；
}
.hamburger-menu.active div{
文学士