单击锚标记后，汉堡菜单未关闭

Question

在菜单中单击某个锚点项目后，我希望能够关闭菜单，但是它不起作用。 javascript中的remove方法由于某些原因无法正常工作。如果我浏览页面，菜单会自动关闭，但不会在索引页面上，而是保持打开状态。我仍在学习Javascript，请多多包涵。这是额外的CSS

const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');

netflix_open_btn.addEventListener('click', () => {
	netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') });
});

netflix_close_btn.addEventListener('click', () => {
	netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});

.netflix-text {
	text-transform: uppercase;
}

.netflix-list li a:hover{
  color: #d6aa55;
}

.netflix-nav-btn {
	border: 0;
	background: transparent;
	cursor: pointer;
  font-size: 20px;
  z-index: 10;
}

.netflix-open-btn {
	position: fixed;
	top: 30px;
  left: 10px;
  z-index: 10;
}

.netflix-nav {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	transform: translateX(-100%);
  transition: transform .3s ease-in-out; 
  z-index: 10;
}



.netflix-nav.visible {
	transform: translateX(0);
}

.netflix-nav-black {
	background-color: black;
	width: 60%;
	max-width: 480px;
	min-width: 320px;
	transition-delay: .4s;
}

.netflix-nav-black.visible {
	transition-delay: 0s;
}

.netflix-nav-red {
	background-color: rgb(214, 170, 85);
	transition-delay: .2s; 
	width: 95%;
}

.netflix-nav-red.visible {
	transition-delay: .2s;
}

.netflix-nav-white {
	background-color: #fff;
	padding: 40px;
	position: relative;
	transition-delay: 0s; 
	width: 95%;
}

.netflix-nav-white.visible {
	transition-delay: .4s;
}

.netflix-close-btn {
	opacity: 0.3;
	position: absolute;
	top: 40px;
	right: 30px;
}

.netflix-logo {
	width: 245px;
}

@media (max-width:768px){
  .netflix-logo{
    width: 197px;
  }
}

.netflix-list {
	list-style-type: none;
	padding: 0;
}

.netflix-list li {
	margin: 20px 0;
}

.netflix-list li a {
	color: rgb(34, 31, 31);
	font-size: 19px;
	text-decoration: none;
	text-transform: uppercase;
}

.netflix-list ul {
	list-style-type: none;
	padding-left: 20px;
}

<button class="netflix-nav-btn netflix-open-btn">
    <i class="fas fa-bars fa-2x"></i>
  </button>

  <div class="netflix-nav netflix-nav-black">
    <div class="netflix-nav netflix-nav-red">
      <div class="netflix-nav netflix-nav-white">
        <button class="netflix-nav-btn netflix-close-btn">
          <i class="fas fa-times"></i>
        </button>

        <img class="netflix-logo" src="images/GOLD.png" alt="Logo" />

        <ul class="netflix-list">
          <li><a href="index-en.php" class="gold">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li>
            <ul>
              <li><a href="tattoo-en.html">Tattoo</a></li>
              <li><a href="beauty-en.html">Beauty</a></li>
              <li><a href="piercing-en.html">Piercing</a></li>
            </ul>
          </li>
          <li><a href="#contact">Contact</a></li>
          <li>
                            <a href="index.php">Danish</a><img src="/images//denmark.svg" alt="danish-flag" class="flag" />
                        </li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

为此，您将必须创建一个函数，每次单击链接时就可以调用该函数！

  const netflix_open_btn = document.querySelector(".netflix-open-btn");
  const netflix_nav = document.querySelectorAll(".netflix-nav");

  netflix_open_btn.addEventListener("click", () => {
    netflix_nav.forEach(nav_el => {
      nav_el.classList.add("visible");
    });
  });
  function closeTab() {
    netflix_nav.forEach(nav_el => {
      nav_el.classList.remove("visible");
    });
  }

.netflix-text {
  text-transform: uppercase;
}

.netflix-list li a:hover {
  color: #d6aa55;
}

.netflix-nav-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
}

.netflix-open-btn {
  position: fixed;
  top: 30px;
  left: 10px;
  z-index: 10;
}

.netflix-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 10;
}

.netflix-nav.visible {
  transform: translateX(0);
}

.netflix-nav-black {
  background-color: black;
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  transition-delay: 0.4s;
}

.netflix-nav-black.visible {
  transition-delay: 0s;
}

.netflix-nav-red {
  background-color: rgb(214, 170, 85);
  transition-delay: 0.2s;
  width: 95%;
}

.netflix-nav-red.visible {
  transition-delay: 0.2s;
}

.netflix-nav-white {
  background-color: #fff;
  padding: 40px;
  position: relative;
  transition-delay: 0s;
  width: 95%;
}

.netflix-nav-white.visible {
  transition-delay: 0.4s;
}

.netflix-close-btn {
  opacity: 0.3;
  position: absolute;
  top: 40px;
  right: 30px;
}

.netflix-logo {
  width: 245px;
}

@media (max-width: 768px) {
  .netflix-logo {
    width: 197px;
  }
}

.netflix-list {
  list-style-type: none;
  padding: 0;
}

.netflix-list li {
  margin: 20px 0;
}

.netflix-list li a {
  color: rgb(34, 31, 31);
  font-size: 19px;
  text-decoration: none;
  text-transform: uppercase;
}

.netflix-list ul {
  list-style-type: none;
  padding-left: 20px;
}

<button class="netflix-nav-btn netflix-open-btn">
  <i class="fas fa-bars fa-2x"></i> open
</button>

<div class="netflix-nav netflix-nav-black">
  <div class="netflix-nav netflix-nav-red">
    <div class="netflix-nav netflix-nav-white">
      <button
        onclick="closeTab()"
        class="netflix-nav-btn netflix-close-btn"
      >
        <i class="fas fa-times"></i>close
      </button>

      <img class="netflix-logo" src="images/GOLD.png" alt="Logo" />

      <ul class="netflix-list">
        <li>
          <a onclick="closeTab()" href="index-en.php" class="gold">Home</a>
        </li>
        <li><a onclick="closeTab()" href="#about">About</a></li>
        <li><a onclick="closeTab()" href="#services">Services</a></li>
        <li>
          <ul>
            <li><a href="tattoo-en.html">Tattoo</a></li>
            <li><a href="beauty-en.html">Beauty</a></li>
            <li><a href="piercing-en.html">Piercing</a></li>
          </ul>
        </li>
        <li><a href="#contact">Contact</a></li>
        <li>
          <a href="index.php">Danish</a
          ><img src="/images//denmark.svg" alt="danish-flag" class="flag" />
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

您需要将事件监听器附加到每个<a>元素上。

const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');
const netflix_btns = document.querySelectorAll('.netflix-list a');

netflix_open_btn.addEventListener('click', () => {
  netflix_nav.forEach(nav_el => {
    nav_el.classList.add('visible')
  });
});

netflix_close_btn.addEventListener('click', () => {
  netflix_nav.forEach(nav_el => {
    nav_el.classList.remove('visible')
  });
});

var length = netflix_btns.length;
for (let x = 0; x < length; x++) {
  netflix_btns[x].addEventListener('click', () => {
    netflix_nav.forEach(nav_el => {
      nav_el.classList.remove('visible')
    });
  });
}

.netflix-text {
  text-transform: uppercase;
}

.netflix-list li a:hover {
  color: #d6aa55;
}

.netflix-nav-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
}

.netflix-open-btn {
  position: fixed;
  top: 30px;
  left: 10px;
  z-index: 10;
}

.netflix-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform .3s ease-in-out;
  z-index: 10;
}

.netflix-nav.visible {
  transform: translateX(0);
}

.netflix-nav-black {
  background-color: black;
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  transition-delay: .4s;
}

.netflix-nav-black.visible {
  transition-delay: 0s;
}

.netflix-nav-red {
  background-color: rgb(214, 170, 85);
  transition-delay: .2s;
  width: 95%;
}

.netflix-nav-red.visible {
  transition-delay: .2s;
}

.netflix-nav-white {
  background-color: #fff;
  padding: 40px;
  position: relative;
  transition-delay: 0s;
  width: 95%;
}

.netflix-nav-white.visible {
  transition-delay: .4s;
}

.netflix-close-btn {
  opacity: 0.3;
  position: absolute;
  top: 40px;
  right: 30px;
}

.netflix-logo {
  width: 245px;
}

@media (max-width:768px) {
  .netflix-logo {
    width: 197px;
  }
}

.netflix-list {
  list-style-type: none;
  padding: 0;
}

.netflix-list li {
  margin: 20px 0;
}

.netflix-list li a {
  color: rgb(34, 31, 31);
  font-size: 19px;
  text-decoration: none;
  text-transform: uppercase;
}

.netflix-list ul {
  list-style-type: none;
  padding-left: 20px;
}

<button class="netflix-nav-btn netflix-open-btn">
    <i class="fas fa-bars fa-2x"></i>Open
  </button>

<div class="netflix-nav netflix-nav-black">
  <div class="netflix-nav netflix-nav-red">
    <div class="netflix-nav netflix-nav-white">
      <button class="netflix-nav-btn netflix-close-btn">
          <i class="fas fa-times"></i>Close
        </button>

      <img class="netflix-logo" src="images/GOLD.png" alt="Logo" />

      <ul class="netflix-list">
        <li><a href="index-en.php" class="gold">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li>
          <ul>
            <li><a href="tattoo-en.html">Tattoo</a></li>
            <li><a href="beauty-en.html">Beauty</a></li>
            <li><a href="piercing-en.html">Piercing</a></li>
          </ul>
        </li>
        <li><a href="#contact">Contact</a></li>
        <li>
          <a href="index.php">Danish</a><img src="/images//denmark.svg" alt="danish-flag" class="flag" />
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 3

Meybe不会关闭，因为没有页面更改，因此也没有重新加载。 您可以使用一些js手动将其关闭。您的示例没有与项目单击相关的关闭功能。例如：

netflix_nav.addEventListener('click', () => {
    netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});