使用不透明度时无法点击事件监听器点击按钮

Question

所以我有一个问题，为什么有些东西不起作用.. 我有一个小的移动菜单，当我单击主按钮时，我正在尝试展开子项目，并带有一些动画。

首先，我将子项隐藏在主项下方，它们的不透明度为 0。 然后在点击时，我会在容器上设置一个类，它们会得到不透明度 1。 但是我的事件永远不会触发......

但是如果我在它们上使用 display:none 而不是 opacity 0，它可以正常工作...

Codepen 示例：https://codepen.io/andrelange91/pen/abzmoww

HTML

<div class="nav-wheel" id="nav-wheel__container">
  <button class="nav-wheel__main" id="nav-wheel__btn">
    <i class="fas fa-car"></i>
  </button>
  <a class="nav-wheel__sublink">
    <i class="fas fa-truck-pickup"></i>
  </a>
  <a class="nav-wheel__sublink">
    <i class="fas fa-truck-pickup"></i>
  </a>
  <a class="nav-wheel__sublink">
    <i class="fas fa-truck-pickup"></i>
  </a>
</div>

样式

.nav-wheel{
  position:fixed;
  left:50%;
  bottom:5%;
  transform:translate(-50%,-5%);
  .nav-wheel__main, .nav-wheel__sublink{
    background-color:orange;
    border:0;
    color:white;
    width:70px;
    height:70px;
    border-radius:50%;
    position:absolute;
    z-index:-1;
    bottom:0;
    left:0;
    box-shadow:0 0 8px rgba(0,0,0,0.5);
    transition: all 750ms cubic-bezier(.218,.63,.325,1);
    cursor:pointer;
    &:focus{
      outline:none;
    }
    i.fas{
      font-size:32px;
    }
  }

  .nav-wheel__main{

  }
  .nav-wheel__sublink{
    z-index:-1;
    display:none;
    text-align:center;
    //opacity:0; // no good...

    i.fas{
      margin-top:17px;
    }
  }
  &.active{
    transition: all 750ms cubic-bezier(.218,.63,.325,1);
    .nav-wheel__main{
      z-index:50;
      left:0;
    }
    .nav-wheel__sublink{
      //opacity:1; // no good...
      display:block;

      &:nth-child(2){
        left: -75px;
        bottom: 55px;
      }
      &:nth-child(3){
        left:0;
        bottom:95px;
      }
      &:nth-child(4){
        left: 75px;
        bottom: 55px;
      }
    }
  }
}

Javascript

const mainBtn = document.getElementById('nav-wheel__btn');
const mainEle = document.getElementById('nav-wheel__container');

console.log(mainBtn);
console.log(mainEle);

mainBtn.addEventListener("click", function(){

  console.log("button clicked");

  if(mainEle.classList.contains('active')){

    mainEle.classList.remove("active");  

  }else{

    mainEle.classList.add("active");  

  }
}); 

Answer 1

除了你的 css，一切都很好。

在渲染时，您已将 .nav-wheel__main, .nav-wheel__sublink z-index 设置为 -1，因此您将不透明度设为 0，您的子菜单开始与按钮。

因此，您的脚本停止工作，更正了下面提供的 CSS。

.nav-wheel{
  position:fixed;
  left:50%;
  bottom:5%;
  transform:translate(-50%,-5%);
  .nav-wheel__main, .nav-wheel__sublink{
    background-color:orange;
    border:0;
    color:white;
    width:70px;
    height:70px;
    border-radius:50%;
    position:absolute;
    z-index:11;
    bottom:0;
    left:0;
    box-shadow:0 0 8px rgba(0,0,0,0.5);
    transition: all 750ms cubic-bezier(.218,.63,.325,1);
    cursor:pointer;
    &:focus{
      outline:none;
    }
    i.fas{
      font-size:32px;
    }
  }

  .nav-wheel__main{

  }
  .nav-wheel__sublink{
    z-index:-1;
    opacity:0;
    text-align:center;
    //opacity:0; // no good...

    i.fas{
      margin-top:17px;
    }
  }
  &.active{
    transition: all 750ms cubic-bezier(.218,.63,.325,1);
    .nav-wheel__main{
      z-index:50;
      left:0;
    }
    .nav-wheel__sublink{
      opacity:1;

      &:nth-child(2){
        left: -75px;
        bottom: 55px;
      }
      &:nth-child(3){
        left:0;
        bottom:95px;
      }
      &:nth-child(4){
        left: 75px;
        bottom: 55px;
      }
    }
  }
}

希望它会有所帮助。