多个 div 元素的 JS 切换

Question

如果我在 HTML foreach 中有多个元素并且我需要将它们全部设为切换滑块以打开 div 块并包含有关元素的特定信息并且我还需要添加关闭按钮如果用户想要关闭分区。抱歉，我没有要显示的代码，因为我没有找到任何适合我需要的东西。主要思想是有一个产品页面，其中包含使用 foreach 显示在页面上的产品......然后当您单击产品时，会打开带有产品信息的切换 div 块。我应该搜索什么以及使用什么，我找不到任何东西，因为我的知识有限。对不起，糟糕的英语。

Answer 1

您可以轻松地控制元素的可见性，无论是在您单击的 div 中还是在它之后使用您切换的类。这是一个在控制切换的 div 之一之后控制 div 的示例：

document.getElementById("container").addEventListener("click", function(e) {
  var toggleDiv = e.target.closest(".toggle");
  if (toggleDiv && this.contains(toggleDiv)) {
    toggleDiv.classList.toggle("closed");
  }
});

.closed + .detail {
  display: none;
}

<div id="container">
  <div class="toggle closed">Product A</div>
  <div class="detail">Details about Product A</div>
  <div class="toggle closed">Product B</div>
  <div class="detail">Details about Product B</div>
  <div class="toggle closed">Product C</div>
  <div class="detail">Details about Product C</div>
</div>

关键位有：

• 通过 CSS 与相邻的同级组合器隐藏细节 (+)
• 在切换 div 上切换类

我使用事件委托来连接处理程序，但如果您愿意，您也可以将其连接到每个单独的 div。请注意，我使用的 Element#closest 方法相对较新，您可能需要在 parentNode 上使用 polyfill 或循环。

Answer 2

据我了解。 您需要使用按钮标签切换 div 元素，并且您单击的 button 将显示该特定的 div 元素。

    <div id="container1" class={container1 ? "show" : "hide"}> 
       container1
     </div>
     <div id="container2"class={container2 ? "show" : "hide"}> 
     container2
     </div>
     <div id="container3"class={container3 ? "show" : "hide"}> 
     container3         
     </div>

和三个button标签调用toggle函数来显示三个div元素。

<div class="container">
  <button name="container1" onclick=(toggle())>Container1</button>
  <button name="container2" onclick=(toggle())>Container2</button>
  <button name="container3" onclick=(toggle())>Container3</button>
</div>

切换功能

function toggle(e) {
 if(e.target.name === 'container1'){
  container1 = true;
  }
  else if(e.target.name === 'container2'){
  container2 = true; 
  }
 else if(e.target.name === 'container3'){
  container3 = true;   
  }
 }

css部分

  .show{
     display: block;
   }
  .hide{
    display: none;
   }