Question

我的（汉堡）按钮有问题。

当我单击它时，正在向我的标题链接添加一个类，但是该类不起作用->我需要在单击上从“ transform：translateX（100％）”更改为“ transform：translateX（0）;

”

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

到目前为止，我的代码：

<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”类-很好，但是不知道为什么我的转换：translate（0）无法正常工作。

Answer 1

这应该可以解决问题：

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

问题在于.header-links具有translateX（100％），因此translateX被忽略。我会在添加.header-links之前将 transform：translateX（100％）移至另一个类并删除它。

CSS

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

HTML

<ul class="header-links tX100">

JS

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

点击按钮无效->转换

1 个答案: