在较大屏幕尺寸上删除汉堡菜单

Question

我已经为我的网站创建了一个汉堡包菜单，我希望它在更大的屏幕尺寸下完全消失。我希望在更大的屏幕尺寸下删除.在我的所有导航元素上显示的类。当我在更大的屏幕尺寸下运行时，我的汉堡包菜单保持打开。我不知道这个问题的解决方案是否简单，但我是一个在js的大块头，我不知道如何解决它。[小汉堡菜单][1]

null

// Select DOM Items
const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.nav-menu');
const menuNav = document.querySelector('.nav-ul');
const navItems = document.querySelectorAll('.nav-item');

// Seti Initial State Of Menu
 let showMenu = false;  

menuBtn.addEventListener('click', toggleMenu);

function toggleMenu() {
    if(!showMenu) {
menuBtn.classList.add('close');
menu.classList.add('show');
menuNav.classList.add('show');
navItems.forEach(item => item.classList.add('show'));


// Set menu state
showMenu = true;
    } else {
        menuBtn.classList.remove('close');
        menu.classList.remove('show');
        menuNav.classList.remove('show');
        navItems.forEach(item => item.classList.remove('show'));
        
        // Set Menu State
        showMenu = false;
    }
}

.nav-logo-wrapper {
  .menu-btn {
    position: absolute;
    position: fixed;
    z-index: 3;
    right: 35px;
    top: 100px;
    cursor: pointer;
    @include easeOut;

    .btn-line {
      width: 28px;
      height: 3px;
      margin: 0 0 5px 0;
      background: white;
      @include easeOut;
    }
    //   Rotate Into X With Menu Lines
    &.close {
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: translate(180deg);

      .btn-line {
        // Line 1 - Rotate
        &:nth-child(1) {
          transform: rotate(45deg) translate(5px, 5px);
        }
        // Line 2 - Hide
        &:nth-child(2) {
          opacity: 0;
        }
        // Line 3 - Rotate

        &:nth-child(3) {
          transform: rotate(-45deg) translate(6.5px, -6.5px);
        }
      }
    }
  }
}

<!-- navigation mobile menu -->
    <nav class="nav-menu animate__animated animate__fadeInRight">
        <ul class="nav-ul">
            <li class="nav-item">
            <a class="nav-link  current" href="index.html">
                Home
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link"  href="products.html">
        Products
            </a>
        </li>
         <li  class="nav-item">
             <a class="nav-link" href="#features">
                 About us
             </a>
         </li>
         
         <li  class="nav-item"><a class="nav-link" href="">
        Pricing
         </a></li>
        </ul>
        </nav>

null

Answer 1

您是否考虑过为此使用CSS媒体查询而不是JavaScript？

null

.small {
  display: block;
}
.large {
  display: none;
}

@media only screen 
and (min-width : 500px)  {
  .small {
    display: none;
  }
  .large {
    display: block;
  }
}

<div class="small">Small/medium browser width only</div>
<div class="large">Larger browser width only</div>