点击按钮切换弹出菜单功能实现异常问题求助

现存错误点 #

• 未获取菜单按钮DOM元素：原生JS中直接使用menuBtn绑定事件，没有提前通过选择器获取对应DOM节点，会抛出变量未定义的报错
• 点击事件绑定的目标元素错误：代码中监听#nav1的点击事件，但HTML结构中不存在id为nav1的元素，实际触发点击的应该是汉堡菜单按钮.menu-btn
• jQuery选择器语法错误：选中弹窗时写的$("popup")是标签选择器，要选中id为popup的元素需要加#前缀，改为$("#popup")
• 弹窗动画样式缺失：#popup.open仅设置了display:block，但opacity仍为0，导致弹窗触发后仍然透明不可见
• 两套菜单切换逻辑分离：原生JS控制汉堡按钮的样式切换，jQuery控制弹窗显示，二者分开写会导致逻辑不同步，出现按钮样式变了但弹窗没弹出的问题

修正后的代码 #

JS代码 #

// 获取菜单按钮DOM元素
const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;

// 统一绑定点击事件，同步处理按钮动画和弹窗切换
menuBtn.addEventListener('click', () => {
  menuBtn.classList.toggle('open');
  $('#popup').toggleClass('open');
  menuOpen = !menuOpen;
});

CSS代码（仅修改#popup.open部分即可，其余样式无需改动） #

#popup.open {
    display: block;
    opacity: 1;
}

HTML补充（需在原有HTML基础上添加汉堡按钮的结构，你之前的代码漏了这部分） #

<!-- 汉堡按钮结构 -->
<div class="menu-btn">
  <div class="menu-btn__burger"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popup">
  <nav id="main-nav">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Über uns</a></li>
      <li><a href="">Galerie</a></li>
    </ul>
  </nav>
</div>

修改后点击汉堡按钮，按钮会自动切换为叉号状态同时弹窗平滑显示，再次点击按钮则按钮恢复汉堡形态、弹窗隐藏，完全匹配需求的切换效果。

内容的提问来源于stack exchange，提问作者xSequenic