Question

我将菜单缩小为汉堡包式
max-width: 500px;
我添加了javascript，以在单击链接后将其关闭，并且效果很好，但是在单击第一个链接后，要再次打开它，tha burgburger图标不起作用，但是您必须单击菜单链接应该位于的位置（即使不显示）。

var nav = 1;

function navMenu() {
  if (nav === 1) {
    document.getElementById("showmenu").style.opacity = 0;
    nav = 0;
  } else if (nav === 0) {
    document.getElementById("showmenu").style.opacity = 1;
    nav = 1;
  }
}

.nav {
  justify-content: flex-end;
  text-align: right;
  height: 50px;
  line-height: 50px;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-size: calc(12px + .2vw);
  width: 100%;
  box-sizing: border-box;
}

.menu {
  display: block;
  margin: 0 30px 0 0;
}

.menu a {
  text-decoration: none;
  color: #828282;
  margin: 0 20px;
  line-height: 50px;
}

label {
  margin: 0 0 0 0;
  font-size: 25px;
  line-height: 50px;
  display: none;
  margin: 0 20px;
  text-align: right;
}

#toggle {
  display: none;
}

@media screen and (max-width: 500px) {

  label {
    display: block;
    cursor: pointer;
  }

  .nav {
    margin-right: 0;
  }

  .menu {
    text-align: center;
    width: 100%;
    display: none;
    box-sizing: border-box;
    background-color: #000000;
  }

  .menu a {
    display: block;
    border-bottom: 1px solid #D736A6;
    margin: 0;
  }

  #toggle:checked+.menu {
    display: block;
  }
}

<div class="nav">
  <label for="toggle">&#9776;</label>
  <input type="checkbox" id="toggle">
  <div class="menu" id="showmenu" onclick="navMenu()">
    <a href="#home">Home</a>
    <a href="#aboutme">About</a>
    <a href="#skills">Skills</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </div>
</div>

Answer 1

    <div class="menu" id="showmenu" onclick="clickAnyAreaOnMenu();">
          <a href="#home">Home</a>
          <a href="#aboutme">About</a>
          <a href="#skills">Skills</a>
          <a href="#work">Work</a>
          <a href="#contact">Contact</a>
    </div>
    <script>
        function clickAnyAreaOnMenu() {
            let toggle = document.getElementById("toggle");
            toggle.checked = false;
        }
    </script>

单击后汉堡菜单不打开

1 个答案: