javascript - 切换按钮单击时弹出

Question

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

这是我的代码：

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>

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

标签： javascripthtmlcss

Answer 1

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

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