尝试在网站(HTML,CSS和最小的javascript)上设置我的文本部分,使其仅显示段落的前几行,然后淡出并显示一个选项以查看更多内容。单击更多按钮/文本时,该部分将向下扩展,以完整显示文本。

这是一张有望解释我要做什么的图像。

javascript - 淡出扩展文字部分-LMLPHP

谢谢你的帮助!

最佳答案

$(function() {
    $('.open-close').each(function() {
        var item = $(this);
        var slide = item.find('.slide').css({
            'height': 100
        });
        var opener = item.find('.more');
        var isSlideOpen = false;
        var slideHeight = slide.find('.slide-content').innerHeight();

        opener.click(function(e) {
            e.preventDefault();

            if(isSlideOpen) {

                slide.stop(true).animate({
                    height: 100
                }, function() {
                    isSlideOpen = false;
                });
            } else {
                slide.stop(true).animate({
                    height: slideHeight
                }, function() {
                    isSlideOpen = true;
                });
            }
        });
    });
});

html {
  background: #000;
}
body {
  line-height: 20px;
  font-size: 14px;
  margin: 0;
  color: #fff;
}

.open-close {
  padding: 10px;
}

.link-holder {
  position: relative;
  text-align: right;
  padding: 10px 0 0;
  z-index: 10;
}

.link-holder:before {
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  height: 80px;
  content: '';
  z-index: -1;
  bottom: 20px;
  right: 0;
  left: 0;
}

.slide {
  position: relative;
  overflow: hidden;
  z-index: 5;
}

.more {
  text-decoration: none;
  color: #cff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="open-close">
    <div class="slide">
      <div class="slide-content">
        <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
       </div>
    </div>
    <div class="link-holder">
        <a href="#" class="more">More</a>
    </div>
</div>

07-24 09:54
查看更多