文本出现/消失在带有按钮切换的图像顶部

Question

在移动设备中，我正在尝试创建一个显示在图像顶部的切换开关，当点击它时，文本也会显示在图像顶部。

我基本上想重新创建The Guardian newspaper 如何处理移动设备右下角的小 (i) 图标。

在桌面上，文本默认在图像下方，并且 (i) 图标消失了。

到目前为止，我已经设法在网上其他地方找到了类似的解决方案，但它并没有像我需要的那样正常工作。

function toggleText() {
   var text = document.getElementById("demo");
   if (text.style.display === "none") {
      text.style.display = "block";
   } else {
      text.style.display = "none";
   }
}

#blog {
    width: 100%;
}

#blog figure {
    position: relative;
}

#blog figure figcaption {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    color: black;
    text-align: left;
    background: rgba(0, 0, 0, 0.5);
}

#blog figure button {
    position: absolute;
    bottom: 0;
    right: 0;
    color: black;
    border: 5px solid black;
}

<div id="blog">
  <figure> 
    <img src="https://cdn2.hubspot.net/hubfs/4635813/marble-around-the-world.jpg" alt="A photo of a slab of marble for example">
    <figcaption id="demo" style='display: none'>A photo of a slab of marble for example</figcaption>
    <button type='button' onclick="toggleText()">(i)</button>
  </figure>
</div>

Answer 1

• 不要使用 ID。您的代码应该是可重用的！
• 不要使用内联 JS on* 处理程序，而是使用 Element.addEventListener()
• 不要使用内联 style 属性。
• 不要使用el.style.display === "something" 来检查display 样式。请改用Element.classList.toggle()

这个简单的示例使用 JavaScript 简单地在按钮的父级 figure 元素上切换 className "is-active"。
其他一切（图标符号更改、字幕动画等）完全由 CSS 处理：

document.querySelectorAll("figure button").forEach(EL_btn => {  
  EL_btn.addEventListener("click", () => {
    EL_btn.closest("figure").classList.toggle("is-active");
  });
});

/* QuickReset */ * {margin: 0; box-sizing: border-box;}

img {
  max-width: 100%; /* Never extend images more than available */
}

figure {
  position: relative;
  overflow: hidden; /* overflow hidden to allow figcaption hide bottom */
}

figure img {
  display: block; /* prevent "bottom space" caused by inline elements */
}

figure figcaption {
  position: absolute;
  width: 100%; 
  bottom: 0;
  padding: 1rem;
  padding-right: 4rem; /* Prevent text going under the button icon */ 
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  transform: translateY(100%); /* Move down, out of view */
  transition: transform 0.3s; /* Add some transition animation */
}

figure.is-active figcaption {
  transform: translateY(0%); /* Move into view */
}

figure button {
  position: absolute;
  width: 2rem;
  height: 2rem;
  bottom: 0.5rem;
  right: 0.5rem;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  cursor: pointer;
}
figure button::before {
  content: "\2139"; /* i icon */
}

figure.is-active button::before {
  content: "\2A09"; /* x icon */
}

<figure>
  <img src="https://cdn2.hubspot.net/hubfs/4635813/marble-around-the-world.jpg" alt="A photo of a slab of marble for example">
  <figcaption>A photo of a slab of marble for example</figcaption>
  <button type="button"></button>
</figure>

以上内容适用于您网站上任意数量的此类元素，无需添加更多 CSS 或 JS。

Answer 2

我看到有几件事可能会搞砸这件事，一个是没有任何东西可以让您的图像适应您的移动屏幕，此外还有默认情况下存在的边距，所以我建议进行这些更改到 CSS：

首先我将 box-sizing 设置为 border-box 并将边距设置为 0，顺便说一下，这应该是一种常规做法。

*{

  box-sizing: border-box;
  margin: 0;

}

然后选择图像并使其适应您的页面

#blog figure img{
  height: auto;
   width:100%;
}

最后，对于一些样式，您可以在博客 div 中添加一些内边距，以使屏幕上的图像略小

#blog {
    width: 100%;
    padding: 35px;
}

这是Fiddle。