javascript - 单击按钮不起作用 -> 转换

Question

我的(汉堡)按钮有问题。

当我单击它时，它正在向我的标题链接添加一个类，但该类不起作用 -> 我需要在单击时将 transform: translateX(100%) 更改为 transform: translateX(0);

我不知道为什么它不起作用。请帮助我，我尝试了很多方法来修复它，但仍然无法正常工作。

My code so far:

<header>
    <div class="header-logo">
        <p>ecodex</p>
    </div>
    <ul class="header-links">
        <li><a href="#container-two">O NAS</a></li>
        <li><a href="#">OFERTA</a></li>
        <li><a href="#">KONTAKT</a></li>
    </ul>

    <div class="menu">
        <div class="line-one"></div>
        <div class="line-two"></div>
        <div class="line-three"></div>
    </div>
</header>

header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;

  p {
    font-size: 14px;
    letter-spacing: 5px;
    text-transform: uppercase;
  }
  .header-active {
   transform: translateX(0);
  }
  .header-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
    list-style-type: none;
    li {
      font-size: 14px;
      letter-spacing: 3px;
      @media only screen and (max-width: 768px) {
        opacity: 0;
      }
    }

    @media only screen and (max-width: 1024px) {
      width: 60%;
    }
    @media only screen and (max-width: 768px) {
      position: absolute;
      right: 0;
      height: 90vh;
      top: 8vh;
      background: black;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: white;
      width: 50%;
      transform: translateX(100%);
      transition: transform 0.5s ease-in;

      .header-active {
        transform: translateX(0);
      }
    }

  }
  .menu {
    cursor: pointer;
    display: none;
    @media only screen and (max-width: 768px) {
      display: block;
    }
    div {
   width: 25px;
   height: 2px;
   background-color: black;
   margin: 5px;
    }
  }
}

const headerSlide = () => {
    const menu = document.querySelector('.menu');
    const headerLinks = document.querySelector('.header-links');
    menu.addEventListener('click', () => {
        headerLinks.classList.toggle('header-active');
    });
}

headerSlide();

在开发人员工具中，当我单击按钮时，“header-active”类正在添加和删除 - 这很好，但不知道为什么我的 transform: translate(0) 不起作用。

Answer 1

这应该可以解决问题:

.header-active {    
  transform: translateX(0) !important;
}

问题是 .header-links 有 translateX(100%)，所以 translateX 被忽略了。我会将 transform: translateX (100%) 移动到另一个类并在添加 .header-links 之前删除它。

CSS

.tX100 {
  transform: translateX(100%);
}

HTML

<ul class="header-links tX100">

JS

headerLinks.classList.toggle('tx100');
headerLinks.classList.toggle('header-active');