Question

如果我在HTML foreach中有多个元素，并且需要使它们全部成为一个切换滑块，那将打开带有有关该元素的特定信息的div块，如果用户想要关闭该元素，我也需要添加关闭按钮，该怎么办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 标签以调用切换功能以显示三个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;
   }

多个div元素的JS切换

2 个答案: