Question

As the title states, I am wanting my hamburger navbar to close when I click on the tags I have tried many ways for the last couple hours but am unable to solve my problem?

I Have tried setting the hide() property with jquery but no luck think it may be because i am pretty new to JS and am just wanting to get my website finished.

const menuBtn = document.querySelector(".menu-btn");
const mobileContent = document.querySelector(".mobile-content");
const mobileItem = document.querySelector(".mobile-item");
const mobileItems = document.querySelectorAll(".mobile-items");


// Set Initial State Of Menu
let showMenu = false;
menuBtn.addEventListener("click", toggleMenu);
function toggleMenu() {
  if (!showMenu) {
    menuBtn.classList.add("close");
    mobileContent.classList.add("show");
    mobileItem.classList.add("show");
    mobileItems.forEach(item => item.classList.add("show"));
    
    
 // Set Menu State
    showMenu = true;
  } else {
    menuBtn.classList.remove("close");
    mobileContent.classList.remove("show");
    mobileItem.classList.remove("show");
    mobileItems.forEach(item => item.classList.remove("show"));
    // Set Menu State
    showMenu = false;
  }
}

.mobile-nav {
  display: block;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 3;
}
.mobile-nav .menu-btn {
  position: absolute;
  z-index: 3;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.mobile-nav .menu-btn .btn-line {
  width: 28px;
  height: 3px;
  margin: 0 0 5px 0;
  background: #333;
}

.mobile-content {
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 0.9;
  visibility: hidden;
}
.mobile-content.show {
  visibility: visible;
}
.mobile-content .mobile-item {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  float: right;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: blue;
  list-style: none;
  transform: translate3d(0, -100%, 0);
}
.mobile-content .mobile-link {
  display: inline-block;
  position: relative;
  font-size: 2rem;
  padding: 1rem 0;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

<!-- Mobile Nav -->
     <div class="mobile-nav">
       <div class="menu-btn">
         <div class="btn-line"></div>
         <div class="btn-line"></div>
         <div class="btn-line"></div>
       </div>
       <a href="#home"><h2>MATTY</h2></a>
       <nav class="mobile-content">
         <ul class="mobile-item">
           <li class="mobile-items">
             <a href="#about-me" class="mobile-link">
               ABOUT
             </a>
           </li>
           <li class="mobile-items">
             <a href="#the-portfolio" class="mobile-link">
               PORTFOLIO
             </a>
           </li>
           <li class="mobile-items">
             <a href="#" class="mobile-link">
               BLOG
             </a>
           </li>
           <li class="mobile-items">
             <a href="#contact-me" class="mobile-link">
               CONTACT
             </a>
           </li>
         </ul>
       </nav>
       </div>

Answer 1

由于片段中的CSS无效，我不得不删除了其中的一些CSS。

建议您按以下方式使用element.classList.toggle()。

请注意代码变得更简单了。

编辑：单击任何a标签将立即关闭菜单

document.addEventListener("click", (e) => {
  if(e.target.matches('.menu-btn') 
  || e.target.matches('.btn-line')
  || e.target.matches('a')) {
    toggleMenu();
  }
});

function toggleMenu() {
  document.querySelector('.mobile-content').classList.toggle('hide');
}

.btn-line {
  display: block;
  width: 50px;
  margin: 5px;
  border: 2px solid black;
}

.mobile-nav {
  display: block;
  width: 100%;
  z-index: 3;
}

.mobile-content {
  position: fixed;
  width: 100%;
  opacity: 0.9;
}

.hide {
  display: none;
}

<!-- Mobile Nav -->
<div class="mobile-nav">
  <div class="menu-btn">
    <span class="btn-line"></span>
    <span class="btn-line"></span>
    <span class="btn-line"></span>
  </div>
  <a href="#home">
    <h2>MATTY</h2>
  </a>
  <nav class="mobile-content hide">
    <ul class="mobile-item">
      <li class="mobile-items">
        <a href="#about-me" class="mobile-link">
               ABOUT
             </a>
      </li>
      <li class="mobile-items">
        <a href="#the-portfolio" class="mobile-link">
               PORTFOLIO
             </a>
      </li>
      <li class="mobile-items">
        <a href="#" class="mobile-link">
               BLOG
             </a>
      </li>
      <li class="mobile-items">
        <a href="#contact-me" class="mobile-link">
               CONTACT
             </a>
      </li>
    </ul>
  </nav>
</div>

Answer 2

@MPB涉足某些简单的JQuery语言的一种好方法是解决问题的一种方法。快速而简单的方法来制作一个好的汉堡导航菜单是使用JQuery中的toggleClass();函数。只需在未设置的类中创建一个@keyframes-animation，toggleClass();就会在两者之间无缝切换。我一直在这样做，如果您希望我将代码转发给您供您使用，请发表评论。

如何单击<a> tags?

2 个答案: