单击类时将样式添加到链接，并在再次单击该类时将其删除

Question

我的navbar 中有一个汉堡（3 行）<div class="burger"> 用于移动视图（768 像素/更少）。当我单击它时，菜单从右侧滑动。汉堡隐藏在桌面视图中。

我想在单击汉堡后为菜单链接#menu li a 添加宽度，而不是在再次单击汉堡或页面宽度超过 768 像素时删除宽度。 到目前为止，我设法获得了单击汉堡时应用到汉堡的宽度，但即使我再次单击它并检查桌面视图，宽度也不会消失。

我当前的代码：

// Navbar Slide
const burger = document.querySelector('.burger');
const menu = document.getElementById('menu');
const menuLinks = document.querySelectorAll('#menu li');
const menuCS = window.getComputedStyle(menu);
const width = menuCS.width;
const widthTest = '200px';
const navLinks = document.querySelectorAll('#menu li a');

const navSlide = () => {
  burger.addEventListener('click', () => {
    // @ toggle nav
    menu.classList.toggle('menu-active');

    // @ nav links width
    navLinks.forEach((link) => {
      link.style.width = width;
    });

    // @ links animation
    menuLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `menuLinkFade .5s ease forwards ${index / 7 + 0.4}s`;
      }
    });

    // @ burger animation
    burger.classList.toggle('toggle');
  });
}

navSlide();

#menu {
  display: flex;
  justify-content: space-around;
  width: auto;
  height: 8vh;
  margin-right: 10%;
}

#menu li a {
  display: inline-block;
  line-height: 8vh;
  color: #ffffff;
  text-decoration: none;
  padding: 0 20px;
}

.burger {
  display: none;
  margin-right: 10%;
}

@media screen and (max-width:768px) {
  #menu {
    position: absolute;
    top: 8vh;
    right: 0;
    height: 92vh;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #313131;
    margin: 0;
    justify-content: normal;
    transform: translateX(100%);
    transition: transform .5s ease-in;
  }
  #menu.menu-active {
    transform: translateX(0%);
  }
  #menu li a {
    text-align: center;
    padding: 40px 0;
  }
  .burger {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 0;
  }
}

<div id="nav">
  <div class="logo">
    <h4>The Nav</h4>
  </div>
  <ul id="menu">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a class="view"></li>
        <li><a href="#">Contact</a class="view"></li>
        <li><a href="#">Product</a class="view"></li>
      </ul>
      <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </div>
    </div>

我尝试了不同的方法，但似乎没有任何效果。

Answer 1

已解决。我刚刚在链接中添加了一个class="desktop" 并在其中添加了一个width: auto !important，然后将其添加到了javascript：

// @ nav links width
navLinks.forEach((link) => {
  link.style.width = width;
  link.classList.toggle('desktop');
});

// Check Width
window.addEventListener("resize", function(event) {
  if (document.body.clientWidth > 751) {
    if (!navLinks.desktop) {
      navLinks.forEach((link) => {
        link.classList.add('desktop');
      });
    }

    menu.classList.remove('menu-active');
    burger.classList.remove('toggle');
    menuLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = '';
      }
    });
  }

  menu.style.transition = '';
});

}