javascript - 如何使用 JavaScript 在点击时切换隐藏的 div？

Question

我一直试图在单击时使用 .story-overlay 类一次切换一个隐藏的 div，类似于 .foster-container。

我尝试弄乱 querySelectorAll 但由于 div 设置为 display: none in CSS 我无法在点击时切换。基本上，一个覆盖框应该在图像上显示一个简短的段落。有没有更简单的方法来达到这个效果？任何帮助将不胜感激，谢谢！

JavaScript：

var imgzoom = document.querySelectorAll(".foster-container");
var story = document.querySelector(".story-overlay");

function fosterInfo() {
  this.classList.toggle("ToggleClass");
  story.classList.toggle("ToggleClass");
}

imgzoom.forEach(imgzoom => imgzoom.addEventListener('click', fosterInfo));

HTML：

<div class="foster-container foster-toggle" onclick="fosterInfo">
  <div class="story-overlay">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
  <img class="fosters" src="../Images/Fosters/autumn-img.jpg">
</div>

CSS

.foster-container {
  display: inline-block;
  cursor: pointer;
  width: 220px;
  height: 220px;
  margin: 4px 4px 30px 4px;
  transition: .3s ease;
}

.foster-toggle.ToggleClass {
  transform: scale(1.6);
  box-shadow: 0px .5px 6px #000;
}

.fosters {
  width: 100%;
}

.story-overlay {
  display: none;
}

.story-overlay.ToggleClass {
  display: inline;
  position: absolute;
  font-size: 10px;
  width: 210px;
  height: 200px;
  padding: 10px 5px 10px 5px;
  color: #f0f0f0;
  background-color: rgba(0,0,0,.4);
}

标签： javascripttoggle

Answer 1

我只是删除this.classList.toggle("ToggleClass"); 我不确定，你想要这样的东西吗？

var imgzoom = document.querySelectorAll(".foster-container");

var story = document.querySelector(".story-overlay");

function fosterInfo() { 
   story.classList.toggle("ToggleClass"); 
}

imgzoom.forEach(imgzoom => imgzoom.addEventListener('click', fosterInfo)); 

.foster-container {
border: 1px solid green;
}
 
.ToggleClass {
display: none;
}

<div class="foster-container foster-toggle" onclick="fosterInfo">
       <div class="story-overlay">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
<img class="fosters" src="../Images/Fosters/autumn-img.jpg">
</div>