javascript - Javascript汉堡菜单不会保持打开状态

Question

我正在尝试构建一个侧边栏可折叠菜单。目标是#sidenav在用户单击汉堡菜单时显示，#sidenav 如果用户在菜单打开时单击菜单外部，则关闭。

现在，我遇到了一个问题，即window.onclick每当用户单击汉堡包图标时，关闭sidenav 菜单的脚本部分就会被触发，这实际上是在菜单打开之前关闭了菜单。我究竟做错了什么？是什么使菜单无法按我的预期运行？

  var mininav = true;
  var sidenav = document.getElementById("sidenav");

  function toggleSidenav() {
    if (mininav) {
      sidenav.style.width = "300px";
      this.mininav = false;
    } else {
      sidenav.style.width = "0px";
      this.mininav = true;
    }
  }
  window.onclick = function(event) {                      
    if (mininav == false) {
      if (event.target != sidenav) {sidenav.style.width = "0px";}
    }
  }

  nav {
    z-index: 10;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 65px;
    font-size: x-large;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: white;
    border-bottom: 1px solid lightgray}

  /* -------- [MAIN NAV] -------- */
  .mainnav ul {
    margin: 0;
    margin-left: 250px;
    padding: 0;
    overflow: hidden;
    list-style-type: none}
    .mainnav li {float: left}
    .mainnav li:hover {background-color: #F6F6F6; border-bottom: 1px solid purple}

  .mainnav li a {
    display: block;
    text-decoration: none;
    text-align: center;
    color: #5F6368;
    font-size: 20px;
    padding: 21px 20px;}

  /* -------- [SIDE NAV] -------- */
  .sidenav .container {
    z-index: 11;
    position: absolute;
    top: 0; left: 0;
    width: 0px; height: 100vh;
    transition: 0.5s;
    background-color: white;
    border-right: 1px solid lightgray;
    box-shadow: 10px 0px 4px -10px rgba(0,0,0,0.51);}

  .sidenav .top, .sidenav .classes {
    width: 100%;
    padding: 8px 0px;}

  .sidenav .top {border-bottom: 1px solid lightgray}

  .container ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none}
    .container li {width: 95%}

  .container li a {
    display: block;
    text-decoration: none;
    color: #5F6368;
    font-size: 20px;
    padding: 21px 20px;
    margin-bottom: 10px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;}
    .container li a:hover {background-color: #F2F2F2}
    .container li a.active {background-color: #EEEEEE}

  /* -------- [MISC SETTINGS] -------- */
  .profilepic {margin-right: 15px}
  .small-pic img{width: 20px;}
  .medium-pic img{width: 40px;}

  .hamburger {margin-left: 15px}
  .hamburger .line {
    width: 22px;
    height: 2px;
    background-color: darkgray;
    margin: 6px 0;}

  .is-left {float: left;}
  .is-right {margin-left: auto; order: 2;}
  .is-circle {clip-path: circle();}

<nav>
  <div class='sidenav'>
    <div class='hamburger is-left' onclick='toggleSidenav()'>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
    </div>
    <div id='sidenav' class='container'>
      <div class='top'>
        <ul>
          <li><a href=''>Main Menu</a></li>
        </ul>
      </div>
      <div class='classes'>
        <ul>
          <li><a class='active' href=''>Class One</a></li>
          <li><a href=''>Class Two</a></li>
          <li><a href=''>Class Three</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class='mainnav'>
    <ul>
      <li><a href=''>Dash</a></li>
      <li><a href=''>Grades</a></li>
      <li><a href=''>Tasks</a></li>
      <li><a href=''>Skills</a></li>
    </ul>
  </div>
  <div class='profilepic medium-pic is-circle is-right'>
    <img src='https://classcolonies.com/resources/pics/students/68.jpg'>
  </div>
</nav>

Answer 1

您的代码是正确的，但由于事件冒泡而无法正常工作。当您单击子元素时，该事件将被传播。您可以了解更多关于它的信息什么是事件冒泡和捕获？.

我添加了代码event.stopPropagation();，现在它正在工作。

var mininav = true;
  var sidenav = document.getElementById("sidenav");

  function toggleSidenav(event) {
    if (mininav) {
      sidenav.style.width = "300px";
      this.mininav = false;
    } else {
      sidenav.style.width = "0px";
      this.mininav = true;
    }
    event.stopPropagation();
    
  }
  window.onclick = function(event) {   
    if (mininav == false) {
      if (event.target != sidenav) {sidenav.style.width = "0px";}
    }
  }

nav {
    z-index: 10;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 65px;
    font-size: x-large;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: white;
    border-bottom: 1px solid lightgray}

  /* -------- [MAIN NAV] -------- */
  .mainnav ul {
    margin: 0;
    margin-left: 250px;
    padding: 0;
    overflow: hidden;
    list-style-type: none}
    .mainnav li {float: left}
    .mainnav li:hover {background-color: #F6F6F6; border-bottom: 1px solid purple}

  .mainnav li a {
    display: block;
    text-decoration: none;
    text-align: center;
    color: #5F6368;
    font-size: 20px;
    padding: 21px 20px;}

  /* -------- [SIDE NAV] -------- */
  .sidenav .container {
    z-index: 11;
    position: absolute;
    top: 0; left: 0;
    width: 0px; height: 100vh;
    transition: 0.5s;
    background-color: white;
    border-right: 1px solid lightgray;
    box-shadow: 10px 0px 4px -10px rgba(0,0,0,0.51);}

  .sidenav .top, .sidenav .classes {
    width: 100%;
    padding: 8px 0px;}

  .sidenav .top {border-bottom: 1px solid lightgray}

  .container ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none}
    .container li {width: 95%}

  .container li a {
    display: block;
    text-decoration: none;
    color: #5F6368;
    font-size: 20px;
    padding: 21px 20px;
    margin-bottom: 10px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;}
    .container li a:hover {background-color: #F2F2F2}
    .container li a.active {background-color: #EEEEEE}

  /* -------- [MISC SETTINGS] -------- */
  .profilepic {margin-right: 15px}
  .small-pic img{width: 20px;}
  .medium-pic img{width: 40px;}

  .hamburger {margin-left: 15px}
  .hamburger .line {
    width: 22px;
    height: 2px;
    background-color: darkgray;
    margin: 6px 0;}

  .is-left {float: left;}
  .is-right {margin-left: auto; order: 2;}
  .is-circle {clip-path: circle();}

<nav>
  <div class='sidenav'>
    <div class='hamburger is-left' onclick='toggleSidenav(event)'>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
    </div>
    <div id='sidenav' class='container'>
      <div class='top'>
        <ul>
          <li><a href=''>Main Menu</a></li>
        </ul>
      </div>
      <div class='classes'>
        <ul>
          <li><a class='active' href=''>Class One</a></li>
          <li><a href=''>Class Two</a></li>
          <li><a href=''>Class Three</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class='mainnav'>
    <ul>
      <li><a href=''>Dash</a></li>
      <li><a href=''>Grades</a></li>
      <li><a href=''>Tasks</a></li>
      <li><a href=''>Skills</a></li>
    </ul>
  </div>
  <div class='profilepic medium-pic is-circle is-right'>
    <img src='https://classcolonies.com/resources/pics/students/68.jpg'>
  </div>
</nav>

Answer 2

这对我有用：

var isToggled = false;
var sidenav = document.getElementById("sidenav");

function toggleSidenav() {
  if (!isToggled) {
    sidenav.style.width = "300px";
  } else {
    sidenav.style.width = "0px";
  }
  isToggled = !isToggled;
}

window.onclick = function(event) {
  if (isToggled && !event.target.classList.contains('hamburger') && !event.target.classList.contains('line')) {
    toggleSidenav();
  }
}

nav {
  z-index: 10;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 65px;
  font-size: x-large;
  font-family: 'Noto Sans JP', sans-serif;
  background-color: white;
  border-bottom: 1px solid lightgray
}

/* -------- [MAIN NAV] -------- */
.mainnav ul {
  margin: 0;
  margin-left: 250px;
  padding: 0;
  overflow: hidden;
  list-style-type: none
}

.mainnav li {
  float: left
}

.mainnav li:hover {
  background-color: #F6F6F6;
  border-bottom: 1px solid purple
}

.mainnav li a {
  display: block;
  text-decoration: none;
  text-align: center;
  color: #5F6368;
  font-size: 20px;
  padding: 21px 20px;
}

/* -------- [SIDE NAV] -------- */
.sidenav .container {
  z-index: 11;
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 100vh;
  transition: 0.5s;
  background-color: white;
  border-right: 1px solid lightgray;
  box-shadow: 10px 0px 4px -10px rgba(0, 0, 0, 0.51);
}

.sidenav .top,
.sidenav .classes {
  width: 100%;
  padding: 8px 0px;
}

.sidenav .top {
  border-bottom: 1px solid lightgray
}

.container ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style-type: none
}

.container li {
  width: 95%
}

.container li a {
  display: block;
  text-decoration: none;
  color: #5F6368;
  font-size: 20px;
  padding: 21px 20px;
  margin-bottom: 10px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

.container li a:hover {
  background-color: #F2F2F2
}

.container li a.active {
  background-color: #EEEEEE
}

/* -------- [MISC SETTINGS] -------- */
.profilepic {
  margin-right: 15px
}

.small-pic img {
  width: 20px;
}

.medium-pic img {
  width: 40px;
}

.hamburger {
  margin-left: 15px
}

.hamburger .line {
  width: 22px;
  height: 2px;
  background-color: darkgray;
  margin: 6px 0;
}

.is-left {
  float: left;
}

.is-right {
  margin-left: auto;
  order: 2;
}

.is-circle {
  clip-path: circle();
}

<nav>
  <div class='sidenav'>
    <div class='hamburger is-left' onclick='toggleSidenav()'>
      <div class='line'></div>
      <div class='line'></div>
      <div class='line'></div>
    </div>
    <div id='sidenav' class='container'>
      <div class='top'>
        <ul>
          <li><a href=''>Main Menu</a></li>
        </ul>
      </div>
      <div class='classes'>
        <ul>
          <li><a class='active' href=''>Class One</a></li>
          <li><a href=''>Class Two</a></li>
          <li><a href=''>Class Three</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class='mainnav'>
    <ul>
      <li><a href=''>Dash</a></li>
      <li><a href=''>Grades</a></li>
      <li><a href=''>Tasks</a></li>
      <li><a href=''>Skills</a></li>
    </ul>
  </div>
  <div class='profilepic medium-pic is-circle is-right'>
    <img src='https://classcolonies.com/resources/pics/students/68.jpg'>
  </div>
</nav>