JS切换多个div元素

Question

我应该怎么做，如果我在HTML中的foreach多个元素，我需要让他们都与什么有关元素的具体信息打开的div块一个滑动开关，我需要，如果用户想要关闭的div添加关闭按钮了。对不起，我没有任何代码显示，因为我没有发现任何适合我的需要。其主要思想是有正在使用的foreach显示在页面上的产品一个产品页面......然后，当你点击一个产品切换的div块上开设有关于产品的信息。我应该搜索和使用什么，因为我用我的知识有限，我不能发现任何东西。对不起，可怕的英语。

Answer 1

您可以你点击或之后专区内使用它，你切换类容易地控制元素的可见性。这里有一个例子控制，控制切换的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循环来代替。

Answer 2

从我的理解。你需要切换使用按钮，标签和u点击会显示特定的div元素按钮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>

和三个按钮标签来切换功能调用，显示三种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;
   }