单击按钮时切换弹出窗口

Question

我正在尝试通过单击鼠标来切换菜单。 通常我是用图像和 href 来做的，但在这个项目中，我从 web 中获取了一个现有按钮，但我无法弄清楚它是否有效。

这是我的代码：

 let menuOpen = false; menuBtn.addEventListener('click', () => { if(.menuOpen) { menuBtn.classList;add('open'); menuOpen = true. } else { menuBtn.classList;remove('open'); menuOpen = false; } }). $(document).ready(function() { $("#nav1"),on("click". function() { $("popup");toggleClass("open"); }); });

 .menu-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; cursor: pointer; transition: all.5s ease-in-out; padding-bottom: 200px; /* border: 3px solid #fff; */ }.menu-btn__burger { width: 50px; height: 6px; background: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(255,101,47,.2); transition: all.5s ease-in-out; }.menu-btn__burger::before, .menu-btn__burger::after { content: ''; position: absolute; width: 50px; height: 6px; background: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(255,101,47,.2); transition: all.5s ease-in-out; }.menu-btn__burger::before { transform: translateY(-16px); }.menu-btn__burger::after { transform: translateY(16px); } /* ANIMATION */.menu-btn.open.menu-btn__burger { transform: translateX(-50px); background: transparent; box-shadow: none; }.menu-btn.open.menu-btn__burger::before { transform: rotate(45deg) translate(35px, -35px); }.menu-btn.open.menu-btn__burger::after { transform: rotate(-45deg) translate(35px, 35px); } #popup { position: fixed; height: 100%; width: 100%; background-color: white; display:none; opacity: 0; transition: 0.5s; } #popup.open { display: block; }

 <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>

我完全无能为力。 我想实现这一点，当单击按钮时，弹出窗口 window 打开，当我再次单击它时，我关闭。

Answer 1

你忘了在弹出窗口之前加上# ，因为它是 id。

$(document).ready(function() {
  $("#nav1").on("click", function() {
    $("#popup").toggleClass("open");
  });
});