javascript - 如何使用文本预览在 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 的简单解决方案。可扩展部分有一个类使其在视觉上隐藏。然后单击功能将其删除。