汉堡导航栏激活问题?

问题描述 投票:0回答:3

我有一个用CSS构建的基本汉堡包图标导航栏但是当我点击导航器外部的任何地方时它无法正常激活导航栏它会激活整个导航的动画有没有人知道为什么这可能是我尝试搜索StackOverflow和谷歌但似乎无法找到我的答案?

// Mobile Nav
document.addEventListener("click", e => {
  if (
    e.target.matches(".menu-btn") ||
    e.target.matches(".btn-line") ||
    e.target.matches(".activate-nav")
  ) {
    toggleMenu();
  }
});

function toggleMenu() {
  document.querySelector(".mobile-content").classList.toggle("hide");
}

// Hamburger Animation
$(".mobile-nav").click(function() {
  $(".btn-line").toggleClass("close");
});
.mobile-nav {
  display: block;
  position: fixed;
  width: 100%;
  width: 100%;
  top: 0;
  z-index: 3;
}

h2 {
  padding: 0.6rem;
}

.menu-btn {
  position: absolute;
  z-index: 3;
  right: 20px;
  top: 20px;
}

.btn-line {
  width: 28px;
  height: 3px;
  margin: 0 0 4px 0;
  background: #333;
  z-index: 3;
  border-radius: 20%;
  cursor: pointer;
  transition: all 0.5s ease-out;
}


/*  Animation start  */

.btn-line.close:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
  background: blue;
  transition: 0.5s ease;
}

.btn-line.close:nth-child(2) {
  transform: translateY(-3px) rotate(-45deg);
  background: blue;
  transition: 0.5s ease;
}

.mobile-content {
  background: #333;
  width: 100vw;
  height: 100vh;
}

.mobile-item {
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: center;
  text-align: center;
  width: 100vw;
  height: 80vh;
}

.mobile-items {
  font-size: 2rem;
  padding: 1rem 0;
}

.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Mobile Nav -->
<div class="mobile-nav">
  <a href="#home">
    <h2>MATTY</h2>
  </a>
  <div class="menu-btn">
    <div class="btn-line"></div>
    <div class="btn-line"></div>
  </div>
  <nav class="mobile-content hide">
    <ul class="mobile-item">
      <li class="mobile-items">
        <a href="#about-me" class="mobile-link activate-nav">
               ABOUT
             </a>
      </li>
      <li class="mobile-items">
        <a href="#the-portfolio" class="mobile-link activate-nav">
               PORTFOLIO
             </a>
      </li>
      <li class="mobile-items">
        <a href="#home" class="mobile-link activate-nav">
          <del>BLOG</del>
        </a>
      </li>
      <li class="mobile-items">
        <a href="#contact-me" class="mobile-link activate-nav">
               CONTACT
             </a>
      </li>
    </ul>
  </nav>
</div>
javascript jquery html5 css3
3个回答
0
投票

可能是因为这段代码

// Hamburger Animation
$(".mobile-nav").click(function() {
  $(".btn-line").toggleClass("close");
});

make it ie:取代mobile-nav

$(".menu-btn").click(function() {
      $(".btn-line").toggleClass("close");
    });

0
投票

所以也许尝试替换:

// Hamburger Animation $(".mobile-nav").click(function() { $(".btn-line").toggleClass("close"); });

至:

$("body").on('click', '.menu-btn', function() { $(".btn-line").toggleClass("close"); });


0
投票

我只是在你的代码中更新了几个脚本,尝试这个我希望它能帮到你。谢谢

当用户点击汉堡包菜单时,您实际上调用了2次点击方法。这不是一个好的做法,我们需要在1个方法中合并两个方法。

document.addEventListener("click", e => {
  if (e.target.matches(".menu-btn") ||  e.target.matches(".activate-nav")
  ) {
    if(e.target.matches(".menu-btn")){
      $(".btn-line").toggleClass("close");
    }
    toggleMenu();
  }
});

从if语句中删除e.target.matches(".btn-line"),你已经在if语句中检查了他的父类,不需要检查子类。

同时删除下面的jquery代码,我们不再需要它了。

// Hamburger Animation
$(".mobile-nav").click(function() {
  $(".btn-line").toggleClass("close");
});

// Mobile Nav
document.addEventListener("click", e => {
  if (e.target.matches(".menu-btn") ||  e.target.matches(".activate-nav")
  ) {
    if(e.target.matches(".menu-btn")){
      $(".btn-line").toggleClass("close");
    }
    toggleMenu();
  }
});

function toggleMenu() {
  document.querySelector(".mobile-content").classList.toggle("hide");
}
.mobile-nav {
  display: block;
  position: fixed;
  width: 100%;
  width: 100%;
  top: 0;
  z-index: 3;
}

h2 {
  padding: 0.6rem;
}

.menu-btn {
  position: absolute;
  z-index: 3;
  right: 20px;
  top: 14px;
  padding: 6px 0;
}

.btn-line {
  width: 28px;
  height: 3px;
  margin: 0 0 4px 0;
  background: #333;
  z-index: 3;
  border-radius: 20%;
  cursor: pointer;
  transition: all 0.5s ease-out;
}


/*  Animation start  */

.btn-line.close:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
  background: blue;
  transition: 0.5s ease;
}

.btn-line.close:nth-child(2) {
  transform: translateY(-3px) rotate(-45deg);
  background: blue;
  transition: 0.5s ease;
}

.mobile-content {
  background: #333;
  width: 100vw;
  height: 100vh;
}

.mobile-item {
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: center;
  text-align: center;
  width: 100vw;
  height: 80vh;
}

.mobile-items {
  font-size: 2rem;
  padding: 1rem 0;
}

.hide {
  display: none;
}

.mobile-nav > a {
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Mobile Nav -->
<div class="mobile-nav">
  <a href="#home">
    <h2>MATTY</h2>
  </a>
  <div class="menu-btn">
    <div class="btn-line"></div>
    <div class="btn-line"></div>
  </div>
  <nav class="mobile-content hide">
    <ul class="mobile-item">
      <li class="mobile-items">
        <a href="#about-me" class="mobile-link activate-nav">
               ABOUT
             </a>
      </li>
      <li class="mobile-items">
        <a href="#the-portfolio" class="mobile-link activate-nav">
               PORTFOLIO
             </a>
      </li>
      <li class="mobile-items">
        <a href="#home" class="mobile-link activate-nav">
          <del>BLOG</del>
        </a>
      </li>
      <li class="mobile-items">
        <a href="#contact-me" class="mobile-link activate-nav">
               CONTACT
             </a>
      </li>
    </ul>
  </nav>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.