如何在html/css/js中创建一个可扩展的带有文本预览的博客文章

Question

<div class="blog-post">
<h2>My second blog post</h2>
<p><em>November 21, 2018</em></p><br>
<p>Reque augue meliore ei pro, lorem volumus ocurreret eu per. No solum errem laoreet vel, his vero dicam et, ius volutpat assueverit ad. Ei partem eirmod propriae eos. Nulla debet fastidii vim ei, at verterem accommodare eam. Reque augue meliore ei pro, lorem volumus ocurreret eu per. No solum errem laoreet vel, his vero dicam et, ius volutpat assueverit ad. Ei partem eirmod propriae eos. Nulla debet fastidii vim ei, at verterem accommodare eam.</p>
</div>
<div class="blog-post">
<h2>My first blog post</h2>
<p><em>November 14, 2018</em></p><br>
<p>Reque augue meliore ei pro, lorem volumus ocurreret eu per. No solum errem laoreet vel, his vero dicam et, ius volutpat assueverit ad. Ei partem eirmod propriae eos. Nulla debet fastidii vim ei, at verterem accommodare eam. Reque augue meliore ei pro, lorem volumus ocurreret eu per. No solum errem laoreet vel, his vero dicam et, ius volutpat assueverit ad. Ei partem eirmod propriae eos. Nulla debet fastidii vim ei, at verterem accommodare eam.</p>
</div>

我想让博客文章的文本在底部淡出，然后点击展开以获得博客文章的整个高度。

Answer 1

$('.blog-post__read-more').on('click', function(e) {
e.preventDefault();
var $moreText = $(this).siblings('.blog-post__text').find('.blog-post__expandable-text--visually-hidden');
if ($moreText.length) {
$moreText.removeClass('blog-post__expandable-text--visually-hidden').addClass('blog-post__expandable-text');
}
});

.blog-post__expandable-text--visually-hidden {
/* https://gist.github.com/marcol/3979586 */
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding:0 !important;
	border:0 !important;
	height: 1px !important; 
	width: 1px !important; 
	overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blog-post">
<h2>My second blog post</h2>
<p><em>November 21, 2018</em></p><br>
<p class="blog-post__text">
Reque augue meliore ei pro, lorem volumus ocurreret eu per. No solum errem laoreet vel, his vero dicam et, ius volutpat assueverit ad. Ei partem eirmod propriae eos.
<span class="blog-post__expandable-text--visually-hidden">Nulla debet fastidii vim ei, at verterem accommodare eam. Reque augue meliore ei pro, lorem volumus ocurreret eu per. No solum errem laoreet vel, his vero dicam et, ius volutpat assueverit ad. Ei partem eirmod propriae eos. Nulla debet fastidii vim ei, at verterem accommodare eam.</span>
</p>
<a href="#" class="blog-post__read-more">Read more</a>
</div>
<div class="blog-post">
<h2>My first blog post</h2>
<p><em>November 14, 2018</em></p><br>
<p class="blog-post__text">
Reque augue meliore ei pro, lorem volumus ocurreret eu per. No solum errem laoreet vel, his vero dicam et, ius volutpat assueverit ad. 
<span class="blog-post__expandable-text--visually-hidden">Ei partem eirmod propriae eos. Nulla debet fastidii vim ei, at verterem accommodare eam. Reque augue meliore ei pro, lorem volumus ocurreret eu per. No solum errem laoreet vel, his vero dicam et, ius volutpat assueverit ad. Ei partem eirmod propriae eos. Nulla debet fastidii vim ei, at verterem accommodare eam.</span>
</p>
<a href="#" class="blog-post__read-more">Read more</a>
</div>

借助jQuery的简单解决方案。可扩展部件有一个类，使其在视觉上隐藏起来。点击功能会将其删除。