单击 link 时删除的菜单

Question

我希望当 window 为 768px 或更小时，如果我单击其中一个 link，它会将我带到正确的位置。目前，它只会下降，但菜单保持打开状态，十字保持激活状态。

我用 each 添加了最后一部分，但它不能正常工作，当我点击 link 并且 window 大于 768px.

$(document).ready(function() {
  resize()
});

function resize() {
  if (window.innerWidth >= 768) {
    $('.nav__menu').addClass('is-open');
  } else if ($('.nav__menu').hasClass('is-open')) {
    $('.nav__menu').removeClass('is-open');
  }

}

$(window).on('resize', function() {
  resize()
});

$('.nav__burger').on('click', function() {
  if ($(this).hasClass('is-active')) {
    $(this).removeClass('is-active');
    $('.nav__menu').removeClass('is-open');
  } else {
    $('.nav__menu').addClass('is-open');
    $(this).addClass('is-active');
  }
});

$('.menu-item').each(function() {
  $(this).click(function() {
    $('.nav__menu').removeClass('is-open')
    $('.nav__burger').removeClass('is-active');
  })
});

.header .nav__burger {
  height: 37px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 2;
  position: absolute;
}

.header .nav__burger.is-active span {
  background: transparent;
}

.header .nav__burger.is-active span::before {
  transform: translateY(-2px) rotate(45deg);
}

.header .nav__burger.is-active span::after {
  transform: rotate(-45deg);
}

.header .nav__burger span {
  position: relative;
}

.header .nav__burger span,
.header .nav__burger span::before,
.header .nav__burger span::after {
  content: '';
  width: 20px;
  height: 3px;
  background: #000;
  display: block;
  transition: transform 0.5s, background 0.3s;
}

.header .nav__burger span::after,
.header .nav__burger span::before {
  position: absolute;
}

.header .nav__burger span::before {
  transform-origin: 0 50%;
  top: -6px;
}

.header .nav__burger span::after {
  bottom: -6px;
  transform-origin: 0 50%;
}

.header .nav__menu {
  z-index: 1;
  display: flex;
  position: fixed;
  background: #e9bf2b;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.header .nav__menu a {
  transition: color 0.2s;
  text-decoration: none;
  letter-spacing: 0.07em;
  color: #000;
  text-transform: uppercase;
  font: 700 125% mostra-nuova, sans-serif;
  position: relative;
  display: inline-block;
}

.header .nav__menu a:after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #952929;
  content: '';
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(13px);
}

.header .nav__menu a:hover::after {
  opacity: 1;
  transform: translateY(3px);
}

.header .nav__menu>* {
  transform: translateY(-10px);
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}

.header .nav__menu>*:nth-child(2n) {
  transition-delay: 0.1s;
}

.header .nav__menu>*:nth-child(3n) {
  transition-delay: 0.1s;
}

.header .nav__menu>*:nth-child(4n) {
  transition-delay: 0.1s;
}

.header .nav__menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.header .nav__menu.is-open>* {
  opacity: 1;
  transform: translateY(0px);
}

.header .nav__menu>*+* {
  margin-left: 0;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .header .nav__burger {
    display: none;
  }
  .header .nav__menu {
    opacity: 0;
    background: none;
    flex-direction: row;
    justify-content: normal;
    align-items: normal;
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: initial;
    right: initial;
  }
  .header .nav__menu a {
    color: #000;
    font-size: 87.5%;
  }
  .header .nav__menu>*+* {
    margin-top: 0;
    margin-left: 30px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="header">
  <div class="container">
    <button class="nav__burger">
      <span></span>
    </button>
    <header class="nav">
      <ul class="nav__menu">
        <li class="menu-item">
          <a href="#">Home</a>
        </li>
        <li class="menu-item">
          <a href="#">Services</a>
        </li>
        <li class="menu-item">
          <a href="#">Portfolio</a>
        </li>
      </ul>
    </header>
  </div>
</section>

Answer 1

您的 css is-open class 中缺少您。

.header .is-open {
    opacity: 1;
}

此外，您还需要按以下方式更改调整大小功能

function resize() {
    if (window.innerWidth >= 768) {
        $('.nav__menu').addClass('is-open');
        $('.nav__burger').addClass('is-active');
    } else if ($('.nav__menu').hasClass('is-open')) {
        $('.nav__menu').removeClass('is-open');
    }
}

因此，如果 windoe >= 768，则导航汉堡处于活动状态。

Answer 2

您可以检查您筛选的 innerWidth，看看它是否超过 >= 768 然后 return false 并且不要做任何事情或者 else 您可以 addClass 和 removeClass 来自您的菜单项。

添加这个 code:

$('.menu-item').click(function() {
  if (window.innerWidth >= 768) {
    return false
  } else {
    $('.nav__menu').removeClass('is-open')
    $('.nav__burger').removeClass('is-active');
  }
})

单击 link 时删除的菜单

Menu that is deleted when I click on a link

html

css

jquery

menu