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

Question

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

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

我当前的代码：

// 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>

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

我有一个汉堡包（3行）

我的导航栏中的移动视图（768像素/以下）。当我单击它时，菜单从右侧滑动。汉堡在桌面视图中隐藏。我想添加...

Answer 1

部分解决。我只是在链接中添加了class="desktop"并在其中添加了width: auto !important，然后将其添加到javascript：