如何在点击 tags?关闭汉堡包导航

Posted 2021-03-27

正如标题所述，我希望我的汉堡包导航栏在我点击标签时关闭我在过去几个小时尝试了很多方法，但我无法解决我的问题？

我尝试用jquery设置hide（）属性，但没想到它可能是因为我对JS很新，我只是想让我的网站完成。

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>

答案

我不得不删除你的一些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>

另一答案

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

以上是关于如何在点击 tags?关闭汉堡包导航的主要内容，如果未能解决你的问题，请参考以下文章

如何在键盘可访问性焦点上关闭汉堡菜单

如何在键盘可访问性焦点上关闭汉堡菜单

从活动向上导航到片段打开相同的片段 - Android 导航组件

Android：如何在选项卡内从一个片段导航到另一个片段？ [关闭]

在 Android 中创建带有导航抽屉的汉堡菜单

在CSS问题中导航栏的汉堡包