使用媒体查询调整浏览器大小时，jQuery 脚本更改菜单时出现问题

Question

我的 jQuery 代码有问题。

我希望当我的 window 高于 768px 时我的菜单会显示，当我将 window 的大小调整为低于 768px 时我的菜单不会显示。但是这里要么我的菜单在两种情况下都显示，要么都不显示：当我按下十字 (nav__burger) 时，菜单应该在我低于 768px 时出现，但在我高于 768px 时不会出现。

亲切

if (window.innerWidth >= 768 && !$('.nav__menu').hasClass('is-open')) {
  $('.nav__menu').addClass('is-open');
} else {
  if ($('.nav__menu').hasClass('is-open')) {
    $('.nav__burger').addClass('is-active');
  }
  $('.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');
    }
  });
}

.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

您的代码似乎还可以，只需稍作改动即可，但您的逻辑不正确。当 window 变得 resize 时，您需要使用 jQuery.

观察调整大小 event

我们可以将 if (window.innerWidth >= 768) {}) 登录包装在一个函数中，然后在 window resize.

上调用该函数

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

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

当页面 loads 你可以再次调用 $( document ).ready(function() {}) 相同的函数来检查 innerwidth 是否是 >= 768 如果是则继续逻辑否则删除is-open class.

$( document ).ready(function() {
  resize() //load on document ready
})

您将菜单切换 click 功能放在 if anywhere 之外，因为只有在菜单切换为 visible.

时才有效

实时工作演示：（运行片段并单击 full screen 并关闭全屏以查看所有工作）

$(document).ready(function() {
  resize() //load on document ready
})

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

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

//Click function
$('.nav__burger').on('click', function() {
  // console.log('fdfd')
  if ($(this).hasClass('is-active')) {
    $(this).removeClass('is-active');
    $('.nav__menu').removeClass('is-open');
  } else {
    $('.nav__menu').addClass('is-open');
    $(this).addClass('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 2

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

$(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');
    })
});

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

使用媒体查询调整浏览器大小时，jQuery 脚本更改菜单时出现问题

Problem with jQuery script to change menu when resizing browser using media queries

jquery

resize