带有复选框黑客的隐藏内容无法正确显示答案

【问题标题】：Hidden content with checkbox hack not displaying properly带有复选框黑客的隐藏内容无法正确显示
【发布时间】：2016-05-25 20:48:04
【问题描述】：

我一直在开发一种“显示更多”工具来缩短页面上的内容，但遇到了一个奇怪的问题。

此代码使用 CSS 复选框“hack”在显示和隐藏内容之间切换。下面的代码展示了它的作用。

.read-more {
  opacity: 0;
  max-height: 0;
  font-size: 0;
}
.thechecker {
  display: none;
}
.trigger {
  cursor: pointer;
  display: inline-block;
}
.thechecker ~ .trigger:before {
  content: 'Show more';
}
.thechecker:checked ~ .trigger:before {
  content: 'Show less';
}
.thechecker:checked ~ .read-more-wrap .read-more {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

<div class="col-sm-4">
  <input type="checkbox" class="thechecker" id="post-1" />
  <div class="read-more-wrap">
    <h3>I broke something.</h3>

    <p>This is not hidden.</p>
    <div class="read-more">
      <p>This is hidden.</p>
      <!-- THIS IMAGE IS CAUSING THE PROBLEM
       HOW DO I MAKE THIS WORK TO DISPLAY THE IMAGE ALONE? -->
      <img src="https://www.placecage.com/g/200/300" />
    </div>
  </div>
  <label for="post-1" class="trigger"></label>
</div>

当此代码中没有插入图像时，该段落将完美显示，没有任何问题。但是，每当我包含图像时，无论内容有多长，“显示更多”文本都将被有效禁用。单击并拖动将导致拖动图像。

我怎样才能做到这一点，以便在单击标签时只显示图像？

【问题讨论】：

标签： css checkbox

【解决方案1】：

这应该会为您解决问题：https://jsfiddle.net/5f3pbg8b/1/

您只需要将图片包含在您的 css 中即可。

.thechecker:checked ~ .read-more-wrap .read-more, img {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

【讨论】：