Javascript 我如何阻止不可见元素在；“覆盖”；div未激活

当我使用flexbox来对齐overlay div中的项目时，一切都正常工作，除了锚定标记之外，锚定标记在不打开菜单的情况下被触发，并且标记是不可见的，但可以在菜单旁边单击，我如何修复它而不必更改菜单或overlay的样式？感谢您的帮助。干杯

$（函数（）{
$（“.menu link”）。单击（函数（e）{
e、 预防默认值（）；
$（“.menu overlay”）.toggleClass（“打开”）；
$（“.menu”）.toggleClass（“打开”）；
});
});
$（'.menu link'）。单击（函数（）{
$（'body'）.toggleClass（'no-scroll'）；
});
.nav{
显示器：flex；
证明内容：之间的空间；
填充：0.5%；
}
#品牌名称{
颜色：黑色；
字体大小：粗体；
字体系列：圆形标准黑色；
线高：60px；
字体大小：20px；
边缘顶部：45像素；
}
.菜单{
位置：绝对位置；
边缘顶部：50px；
右：5%；
高度：46px；
宽度：46px；
}
.菜单链接{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：1002；
}
.菜单图标{
位置：绝对位置；
宽度：20px；
高度：15px；
保证金：自动；
左：0；
排名：0；
右：0；
底部：1px；
}
/* ------------- */
.菜单行{
背景色：白色；
高度：3倍；
宽度：100%；
边界半径：2px；
位置：绝对位置；
左：0；
过渡：所有0.25秒缓进缓出；
}
.menu-line-2{
排名：0；
底部：0；
保证金：自动；
}
.menu-line-3{
底部：0；
}
.menu.open.menu-line-1{
变换：translateY（7.5px）translateY（-50%）旋转（-45度）；
}
.menu.open.menu-line-2{
不透明度：0；
}
.menu.open.menu-line-3{
变换：translateY（-7.5px）translateY（50%）旋转（45度）；
}
/* ------------- */
.菜单圈{
背景色：#E095F0；
宽度：100%；
身高：100%；
位置：绝对位置；
边界半径：50%；
变换：比例（1）；
z指数：1000；
转换：转换0.3s轻松输入输出；
}
.菜单：悬停.菜单圈{
转换：比例（1.2）；
}
.菜单.打开.菜单圈{
变换：标度（60）；
}
/* ------------- */
.菜单覆盖{
过渡：不透明度0.2s缓进缓出；
不透明度：0；
显示：块；
}
.menu-overlay.open{
位置：固定；
排名：0；
左：0；
高度：100vh；
宽度：100vw；
不透明度：1；
显示：块；
z指数：1001；
背景色：黑色；
溢出：隐藏；
显示器：flex；
对齐项目：居中；
过渡：不透明度1.5s缓进缓出；
}
.没有卷轴{
溢出：隐藏；
}
.目录{
左缘：5%；
保证金权利：5%；
显示器：flex；
弹性：1；
最大宽度：100%；
证明内容：周围的空间；
}
.内容a{
文字装饰：无；
字体系列：圆形Std书；
字体大小：35px；
颜色：白色；
}
.内容a：悬停{
转换：比例（1.2）；
过渡：不透明度5s易入易出；
}

试验
研究使用
指针事件来停止鼠标事件

.contents a {
  cursor: default;
  pointer-events: none;

  text-decoration: none;
  font-family: Circular Std Book;
  font-size: 35px;
  color: white;
}

.open .contents a {
  cursor: pointer !important;
  pointer-events: all !important;
}