javascript - 点击离开或页面内锚链接后如何删除汉堡菜单

Question

当我单击一个链接（所有链接都指向同一页面上的一个位置）或单击菜单之外的某个位置时，我想关闭汉堡菜单。目前，我必须点击链接，然后再次点击汉堡按钮手动关闭菜单。

说到 javascript，我还是个新手。这基本上是让我的投资组合运行的一件事。

function myFunction() {
  let x = document.getElementById("myNav");
  if (x.className === "nav") {
    x.className += " open";
  } else {
    x.className = "nav";
  }
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#topper {
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "header" "navigation";
}

.nav {
  font-family: 'Markazi Text', sans;
  padding-top: 10px;
  position: fixed;
  width: 100%;
  display: grid;
  text-align: center;
  grid-template-columns: 15% auto 0 0 0 0 0;
  grid-template-areas: "ham . navPhotos navVideos navGraphic navWeb navAbout";
}

.nav.open {
  height: 100%;
  background-color: white;
  align-content: start;
  grid-template-columns: 15% 70% 15%;
  grid-template-areas: "ham navPhotos ." ". navPhotos ." ". navVideos ." ". navGraphic ." ". navWeb ." ". navAbout .";
}

#ham {
  grid-area: ham;
}

#navPhotos {
  grid-area: navPhotos;
}

#navVideos {
  grid-area: navVideos;
}

#navGraphic {
  grid-area: navGraphic;
}

#navWeb {
  grid-area: navWeb;
}

#navAbout {
  grid-area: navAbout;
}

@media only screen and (min-width: 601px) {
  #topper {
    width: 100%;
    background-color: white;
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "header" "navigation";
  }
  .indexgallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #ham {
    display: none;
  }
  .nav {
    padding-top: 0;
    position: static;
    width: 600px;
    margin: 0 auto;
    background-color: white;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas: "navPhotos navVideos navGraphic navWeb navAbout";
  }
  .nav.open {
    padding-top: 0;
    position: static;
    width: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas: "navPhotos navVideos navGraphic navWeb navAbout";
  }
  #myNav {
    grid-area: navigation;
  }
}

.empty {
  height: 100px;
  color: rgba(0, 0, 0, 0);
}

<div class="nav" id="myNav">
  <div id="ham"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></div>
  <div id="navPhotos"><a href="#photo">Photography</a></div>
  <div id="navVideos"><a href="#video">Videography</a></div>
  <div id="navGraphic"><a href="#dig">Graphic</a></div>
  <div id="navWeb"><a href="#web">Web Design</a></div>
  <div id="navAbout"><a href="#abt">About</a></div>
</div>

标签： javascriptportfoliohamburger-menu

Answer 1

这是一种方法。

toggle 函数接受两个参数：要切换的元素和所需的状态。如果状态为真并且导航关闭，则导航将打开。如果状态为假或导航打开，则导航将关闭。

我将一个事件侦听器绑定到关闭导航的文档。我还使用stopPropagation()阻止了对汉堡包的点击冒泡到文档。这样，单击汉堡包不会同时触发对文档的单击。

var nav = document.getElementById("myNav");
var ham = document.getElementById("ham");

function toggleNav(x, t) {
  if (t && x.className === "nav") {
    x.className += " open";
  } else {
    x.className = "nav";
  }
}

ham.addEventListener('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  toggleNav(nav, true);
});

document.addEventListener('click', function(e) {
  toggleNav(nav, false);
});

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#topper {
  display: grid;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "header" "navigation";
}

.nav {
  font-family: 'Markazi Text', sans;
  padding-top: 10px;
  position: fixed;
  width: 100%;
  display: grid;
  text-align: center;
  grid-template-columns: 15% auto 0 0 0 0 0;
  grid-template-areas: "ham . navPhotos navVideos navGraphic navWeb navAbout";
}

.nav.open {
  height: 100%;
  background-color: white;
  align-content: start;
  grid-template-columns: 15% 70% 15%;
  grid-template-areas: "ham navPhotos ." ". navPhotos ." ". navVideos ." ". navGraphic ." ". navWeb ." ". navAbout .";
}

#ham {
  grid-area: ham;
}

#navPhotos {
  grid-area: navPhotos;
}

#navVideos {
  grid-area: navVideos;
}

#navGraphic {
  grid-area: navGraphic;
}

#navWeb {
  grid-area: navWeb;
}

#navAbout {
  grid-area: navAbout;
}

@media only screen and (min-width: 601px) {
  #topper {
    width: 100%;
    background-color: white;
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "header" "navigation";
  }
  .indexgallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #ham {
    display: none;
  }
  .nav {
    padding-top: 0;
    position: static;
    width: 600px;
    margin: 0 auto;
    background-color: white;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas: "navPhotos navVideos navGraphic navWeb navAbout";
  }
  .nav.open {
    padding-top: 0;
    position: static;
    width: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-areas: "navPhotos navVideos navGraphic navWeb navAbout";
  }
  #myNav {
    grid-area: navigation;
  }
}

.empty {
  height: 100px;
  color: rgba(0, 0, 0, 0);
}

<div class="nav" id="myNav">
  <div id="ham"><a href="#">&#9776;</a></div>
  <div id="navPhotos"><a href="#photo">Photography</a></div>
  <div id="navVideos"><a href="#video">Videography</a></div>
  <div id="navGraphic"><a href="#dig">Graphic</a></div>
  <div id="navWeb"><a href="#web">Web Design</a></div>
  <div id="navAbout"><a href="#abt">About</a></div>
</div>

您也可以考虑使用classList.