Question

我正在关注this tutorial，并尝试将其应用于我的案例：

HTML

<div class="jiku_text">
  <p>I was born in Mauritius in 1967, spending my childhood under the sun of the Indian Ocean, before moving to the UK in July 1976. Punk had just started its own cultural revolution, while reggae and dub were ever present in the neighbourhood “blues” parties, as well as from the first real booming systems in the cars that would ever so often drive casually through the streets of Lewisham, South-East London. I did all of my schooling there, drawing since as far back as I can remember, spending my youth deep into comics, sci-fi and fantasy literature, as well as role-playing games such as “Dungeons &amp; Dragons”.</p>
  <p>I can’t forget to mention what effect the release of Star Wars, in 1977, had on my vision of the world around me. Before even getting into J.R.R. Tolkien, this movie was definitely a milestone in my childhood, and stoked a fire for science-fiction and fantasy which would have me look at the world around me in a totally different way from before.</p>
  <p>All these influences, as well as the music coming from the radio, the TV and the street, were reflected in what I drew or painted; from comic strip characters to lead figurines, even to the odd oil portrait or landscape painting.</p>
  <p>After my school exams in summer ‘84, I started hanging out in Covent Garden, the hub of the London Hip Hop scene, which I had discovered the year before, walking through it with my mother and the younger of my older brothers. My drawing ability led me to pick up the marker and spray-can, doing anything from painting banners for the “Alternative Arts” centre, or customizing the trousers or jackets of some of the other people hanging out with me, whether they were dancers or Mc’s. I was soon trying to make a name for myself, along with my partner Scribla, then with Zaki Dee, Eskimo, and Xerox as The Trailblazers, and eventually as part of a crew called The Chrome , which I formed in the spring of 1985, around the time of a seminal gig called The Rapattack, at the Shaw Theatre in the Euston area of London.</p>
  <p class="read-more"><a href="#" class="btn btn-danger">Read More</a></p>
</div>

CSS

.jiku_text {
  padding-top: 80px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 60px;
  background: #3a3a3a;
  margin-top: 40px;
  margin-bottom: 40px;
  margin-right: 20px;
  margin-left: 20px;
  color: #fff;
  max-height: 200px;
  position: relative;
  overflow: hidden;
}

.jiku_text .read-more { 
  position: absolute; 
  bottom: 0; 
  left: 0;
  width: 100%; 
  text-align: center; 
  margin: 0; padding: 30px 0; 
  background-image: linear-gradient(to bottom, transparent, black);
}

JS

var $el, $ps, $up, totalHeight;

$(".jiku_text .btn").on("click", function() {
  totalHeight = 0
  $el = $(this);
  $p  = $el.parent();
  $up = $p.parent();
  $ps = $up.find("p:not('.read-more')");
  // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
  $ps.each(function() {
    totalHeight += $(this).outerHeight();
  }); 
  $up
    .css({
    // Set height to prevent instant jumpdown when max height is removed
    "height": $up.height(),
    "max-height": 9999
  })
    .animate({
    "height": totalHeight
  });
  // fade out read-more
  $p.fadeOut();
  // prevent jump-down
  return false;
});

但扩展会产生跳跃，see the test case on jsFiddle

更新

尝试提供outerHeight而不是"height": $up.height(),，但文字未完全展开，请参阅https://jsfiddle.net/fbh0o67o/351/

Answer 1

您的容器div存在问题。从你的css＆＃39; jiku_text＆＃39;。

中删除填充

.jiku_text {
/*  
  padding-top: 80px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 60px;
*/  
  background: #3a3a3a;  
  margin-top: 40px;
  margin-bottom: 40px;
  margin-right: 20px;
  margin-left: 20px;
  color: #fff;
  max-height: 200px;
  position: relative;
  overflow: hidden;
}

Answer 2

感谢我对padding .jiku_text给出的答案，我注意到问题出在哪里：

在我的JS中，我必须将"height": $up.height(),更改为"height": $up.outerHeight(),，然后提供"height": totalHeight + 140，这是height新计算的padding { {1}}

https://jsfiddle.net/fbh0o67o/365/

如何使用淡出背景创建阅读更多链接？

2 个答案: