确实是一个CSS和jQuery兼容性问题。在CSS中，.MainMenu和#NavDark的可见性是由复选框是否被选中来控制的：
#toggle:checked~.MainMenu {
opacity: 1;
transform: translateX(-100%);
}
#toggle:checked~#NavDark {
z-index: 100;
opacity: 1;
display: block;
}
然而，在JS中，这两个元素的可见性则是通过内部的style=""的display属性值来控制的。现在发生的情况是这样的：
- 初始状态下，复选框未被选中，行内样式属性缺失，这意味着两个元素默认的
display值为block，但被CSS移出了屏幕。
- 现在我们点击标签，复选框被选中，CSS将它们重新定位到屏幕上。
#toggle的JS点击处理器运行，但由于样式属性已经隐含为block，所以没有变化发生。
- 接着我们点击
#NavDark关闭菜单。#NavDark的JS处理器运行，将行内样式值设置为display:hidden，因此它们隐藏起来。点击和JS代码都没有改变复选框的状态，所以复选框仍处于选中状态。
- 再次点击标签时，复选框被切换，变为未选中状态，因此CSS将
.MainMenu和#NavDark的位置移动至屏幕外。虽然JS处理器运行并移除了display:none，但由于这两个元素位于屏幕之外，所以并未显示。
- 第二次点击时，JS不做任何操作，因为样式属性表示它们已经是可见的，但复选框被选中，从而又将这两个元素移回屏幕上。
另外，您的z-index值似乎不准确，这使得.MainMenu实际上显示在#NavDark后面，无法被点击。
解决办法方面，[编辑于2024年1月2日，参见评论]您完全不需要使用JS（请参阅Roko C. Buljan的回答了解如何实现），或者您可以去除所有JS代码，除了#NavDark处理器，只需取消选中复选框即可；CSS会隐藏菜单。
$("#NavDark").click(function() {
// 取消选中复选框，从而隐藏导航菜单。
$("#toggle").prop("checked", false);
});
此外，我同意Roko C. Buljan的观点，即代码缩进存在问题（我在代码片段中运行了整理工具以展示应该如何排列），并且您的ID和类名可以进一步规范化。如今，在HTML/CSS世界中，通常会看到小写字母加破折号命名的方式，尽管有时仍然会使用驼峰命名法。