Question

我有一个用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>

Answer 1

可能是因为此代码

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

创建它，即：替换移动导航

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

Answer 2

所以也许尝试替换：

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

收件人：

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

Answer 3

我只是在您的代码中更新了几个脚本，请尝试这样做，希望对您有所帮助。谢谢

当用户单击汉堡包菜单时，您实际上调用了2个单击方法。这不是一个好习惯，我们需要将两种方法合并为一种方法。

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>

汉堡导航栏激活有问题吗？

3 个答案: