JS循环添加事件侦听器在第二个元素的一个条件下不起作用

Question

我正在编写一段代码，通过单击相应按钮来切换某些 UL 项目的可见性，方法是切换 UL 上将不透明度/高度更改为 0 的类（这样我也可以应用过渡）。当第一个元素切换为不可见时，第二个元素不起作用。 onclick 事件未注册。

当按钮和 h3 的样式未设置为出现在同一行时，该代码有效，当我尝试使用 flex、float 或 inline 将两个元素并排放置时，该代码会中断。有没有一种方法可以用来定位它们并且仍然保留完整的功能？

const buttons = document.getElementsByClassName("toggle");
const lists = document.getElementsByClassName("list");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    toggle(i);
  })
};

function toggle(i) {
  if (lists[i].classList.contains("hide")) {
    lists[i].classList.remove("hide");
  } else {
    lists[i].classList.add("hide");
  }
}

<div id="sidebar">
  <div class="side">
    <div class="header">
      <h3>Protein</h3>
      <button class="toggle"></button>
    </div>
    <div>
      <ul class="list">
        <li class="fi">Beef</li>
        <li class="fi">Fish</li>
        <li class="fi">Lamb</li>
        <li class="fi">Pork</li>
        <li class="fi">Poultry</li>
        <li class="fi">Shellfish</li>
        <li class="fi">Vegetarian</li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="header">
      <h3>Cuisine</h3>
      <button class="toggle"></button>
    </div>
    <ul class="list">
      <li class="fi">African</li>
      <li class="fi">American</li>
      <li class="fi">Asian</li>
      <li class="fi">British</li>
      <li class="fi">Cajun Creole</li>
      <li class="fi">Carribean</li>
      <li class="fi">Eastern European</li>
      <li class="fi">Show More</li>
    </ul>
  </div>
</div>

<style>
   .header{
      display: flex;
      align-items: center;
   }
   
   .hide {
   height: 0;
   opacity: 0;
   margin: 0;
   }
</style>

gif of the issue

Answer 1

由于 user120242 的响应说您覆盖了下面的 side class div，您可以通过添加 <div class="side"> 元素和 overflow: hidden; 样式来解决它，以避免溢出下面的 div，所以试试这个：

如果你想将元素放在一起，你需要像@user120242 所说的那样使用 flexbox。

const buttons = document.getElementsByClassName("toggle");
const lists = document.getElementsByClassName("list");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    toggle(i);
  })
};

function toggle(i) {
  if (lists[i].classList.contains("hide")) {
    lists[i].classList.remove("hide");
  } else {
    lists[i].classList.add("hide");
  }
}

.side {
overflow: hidden;
}

<div id="sidebar">
  <div class="side">
    <div class="header">
      <h3>Protein</h3>
      <button class="toggle"></button>
    </div>
    <div>
      <ul class="list">
        <li class="fi">Beef</li>
        <li class="fi">Fish</li>
        <li class="fi">Lamb</li>
        <li class="fi">Pork</li>
        <li class="fi">Poultry</li>
        <li class="fi">Shellfish</li>
        <li class="fi">Vegetarian</li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="header">
      <h3>Cuisine</h3>
      <button class="toggle"></button>
    </div>
    <ul class="list">
      <li class="fi">African</li>
      <li class="fi">American</li>
      <li class="fi">Asian</li>
      <li class="fi">British</li>
      <li class="fi">Cajun Creole</li>
      <li class="fi">Carribean</li>
      <li class="fi">Eastern European</li>
      <li class="fi">Show More</li>
    </ul>
  </div>
</div>

<style>
   .header{
      display: flex;
      align-items: center;
   }
   
   .hide {
   height: 0;
   opacity: 0;
   margin: 0;
   }
</style>

Answer 2

我添加了 pointer-events: none 所以它不会拦截鼠标事件并且它可以工作，但你可能应该找到另一种方法来处理它。我不知道您在为动画、代码或其他样式做什么，所以这可能是最好的解决方案，具体取决于您在做什么。
我添加了一个“显示问题”按钮来显示正在发生的事情。该列表（在由不透明度触发的新堆叠上下文中重新绘制）并覆盖第二个列表。

另一种解决方案是设置位置样式。所以将position: relative 添加到.hide { position: relative } 也可以

滚动到底部以阅读原因的详细描述（不透明样式）。

// show problem
test.onclick=()=>{
  if (lists[0].classList.contains("hide1")) {
    lists[0].classList.remove("hide1");
  } else {
    lists[0].classList.add("hide1");
  }
}



const buttons = document.getElementsByClassName("toggle");
const lists = document.getElementsByClassName("list");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    toggle(i);
  })
};

function toggle(i) {
  if (lists[i].classList.contains("hide")) {
    lists[i].classList.remove("hide");
  } else {
    lists[i].classList.add("hide");
  }
}

.header { display:flex; flex-direction:row }

   .header{
      display: flex;
      align-items: center;
   }
   
   .hide {
   height: 0;
   opacity: 0;
   margin: 0;
   pointer-events: none /* don't intercept mouse events */
   }

/* show problem */
.hide1 {
height: 0;
margin: 0;
opacity: 0.5;
border: 1px solid red;
}

.hide1 * {
border: 1px solid blue;
}

<button id="test">Show Problem</button>

<div id="sidebar">
  <div class="side">
    <div class="header">
      <h3>Protein</h3>
      <button class="toggle"></button>
    </div>
    <div>
      <ul class="list">
        <li class="fi">Beef</li>
        <li class="fi">Fish</li>
        <li class="fi">Lamb</li>
        <li class="fi">Pork</li>
        <li class="fi">Poultry</li>
        <li class="fi">Shellfish</li>
        <li class="fi">Vegetarian</li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="header">
      <h3>Cuisine</h3>
      <button class="toggle"></button>
    </div>
    <ul class="list">
      <li class="fi">African</li>
      <li class="fi">American</li>
      <li class="fi">Asian</li>
      <li class="fi">British</li>
      <li class="fi">Cajun Creole</li>
      <li class="fi">Carribean</li>
      <li class="fi">Eastern European</li>
      <li class="fi">Show More</li>
    </ul>
  </div>
</div>

<style>
   .header{
      display: flex;
      align-items: center;
   }
   
   .hide {
   height: 0;
   opacity: 0;
   margin: 0;
   pointer-events: none
   }
</style>

问题与由于重新渲染导致的不透明样式触发的 z-index 堆叠上下文有关：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
您可以通过在第二个列表的标题上设置opacity: 0.9 来证明这一点，以便第二个列表的标题呈现在相同的上下文层中，然后您将能够单击该按钮。
这个 SO 答案很好地总结了它：
What has bigger priority: opacity or z-index in browsers?
如果未定位不透明度小于 1 的元素，则实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的层如果它是具有 'z-index: 0' 和 'opacity: 1' 的定位元素，将使用该元素