Question

我一直致力于＆＃34; Show More＆＃34;缩短页面内容的工具，并遇到了一个奇怪的问题。

此代码使用CSS Checkbox＆＃34; hack＆＃34;在显示和隐藏内容之间切换。下面的代码显示了它的实际效果。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果此代码中没有插入图像，则段落将完美显示，没有任何问题。然而，每当我包含图像时，无论内容有多长，都会显示更多＆＃34;显示更多＆＃34;文本将被有效禁用。单击并拖动将导致拖动图像。

如何制作本品，以便在点击标签时只显示图像？

Answer 1

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

您只需要将图像包含在CSS中。

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

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

1 个答案: