我一直致力于" Show More"缩短页面内容的工具,并遇到了一个奇怪的问题。
此代码使用CSS Checkbox" 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>
&#13;
如果此代码中没有插入图像,则段落将完美显示,没有任何问题。然而,每当我包含图像时,无论内容有多长,都会显示更多&#34;显示更多&#34;文本将被有效禁用。单击并拖动将导致拖动图像。
如何制作本品,以便在点击标签时只显示图像?
答案 0 :(得分:2)
这应该为您解决:https://jsfiddle.net/5f3pbg8b/1/
您只需要将图像包含在CSS中。
.thechecker:checked ~ .read-more-wrap .read-more, img {
opacity: 1;
font-size: inherit;
max-height: 999em;
}