Question

我在互联网上搜索，有很多资源可以使用不同的方法显示更多/更少的按钮。

但是，我不希望在点击“阅读更多”按钮后立即显示所有文本，我想再显示5行文本。因此，每当用户单击“读取更多”按钮时，它就会显示5行。

关于如何做到这一点的任何想法？

Answer 1

试试这个：

var step = 5;
var initialheight = 2;
$(document).ready(function() {
  var currentHeight = initialheight;
  var maxHeight = document.getElementsByClassName('content')[0].scrollHeight / 12; // assuming 1em is 12px 
  $(".show-more a").on("click", function() {
    var $this = $(this);
    var $content = $this.parent().prev("div.content");
    var linkText = $this.text();

    if (linkText.toUpperCase() === "SHOW MORE") {
      currentHeight += step;
      $content.css('height', currentHeight + 'em');
      if (currentHeight >= maxHeight - step) {
        linkText = "Show less";
      }

    } else {
      currentHeight -= step;
      $content.css('height', currentHeight + 'em');

      if (currentHeight <= step) {
        linkText = "Show more";
      }
    };

    $this.text(linkText);
  });
});

工作示例：http://jsfiddle.net/Wpn94/1932/

jquery显示更多行但不是全部

1 个答案: