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

Question

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

当按钮和 h3 的样式未设置为出现在同一行时，该代码有效，并且当我尝试使用 flex、float 或内联到 position 并排这两个元素时，代码会中断。 有没有一种方法可以用于 position 并且仍然保留全部功能？

 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

Answer 1

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

另一种解决方案是设置 position 样式。 所以添加position: relative to the .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
您可以通过在第二个列表的 header 上设置opacity: 0.9来证明这一点，以便第二个列表的 header 呈现在相同的上下文层中，然后您将能够单击该按钮。
这个 SO answer 总结得很好：
什么更重要：浏览器中的不透明度或 z-index？
如果不透明度小于 1 的元素未定位，则实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的层，如果它是具有 'z-index: 0' 和'不透明度：1'

Answer 2

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

如果您想将元素彼此相邻放置，您需要使用 flexbox，正如@user120242 所说。

 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>