javascript - 如何创建“显示更多”按钮并指定最初可以显示多少行文本

Question

我正在寻找一种在响应式网站上创建幻灯片“显示更多”功能的方法，该功能在段落的两行之后会中断。

我之前通过静态网站实现了这一目标，方法是将容器设置为一定的高度并使用overflow: hidden，然后对容器的高度进行动画处理。

但是，由于具有响应能力，容器以不同的浏览器宽度压缩文本，因此文本可能会占用更多/更少的空间。每次下推该段落时，段落上方也可能有不同的内容。因此，设置height可能无法完全覆盖两行。

如果您需要演示，请查看以下jsFiddle：http://jsfiddle.net/XVAzU/。

因此，无论容器的宽度是多少，或者该段之前或之后的内容，我都需要在该段的两行之后截断。

感谢您的光临！

Answer 1

从小提琴开始，将内容包装到默认类为<div>的content中，该类用于选择，而一个名为hideContent的类将在单击showContent链接时与show more/show less交换。

我还删除了文本所在的<p>。该文本现在位于content-div中，并且我们现在还能够应用正确的高度和行高设置。

HTML：

<div class="text-container">
    <h1>Title goes here</h1>
    <h2>Subtitle</h2>
    <div class="content hideContent">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        <p>Some more text</p>
        <ul>
            <li>Some more text</li>
            <li>Some more text</li>
            <li>Some more text</li>
        </ul>
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
</div>​

CSS：

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}

.showContent {
    line-height: 1em;
    height: auto;
}

我假设设置line-height将确保在所有浏览器中都相同。我对此不是100％肯定的。

我将点击事件附加到“显示更多”链接，该链接使用jQueryUI switchClass()在div上切换类：

$(".show-more a").on("click", function() {
    var $this = $(this); 
    var $content = $this.parent().prev("div.content");
    var linkText = $this.text().toUpperCase();    

    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $content.switchClass("hideContent", "showContent", 400);
    } else {
        linkText = "Show more";
        $content.switchClass("showContent", "hideContent", 400);
    };

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

JsFiddle Demo-显示更多/显示更少，并应用行高和动画

$(".show-more a").on("click", function() {
  var $this = $(this);
  var $content = $this.parent().prev("div.content");
  var linkText = $this.text().toUpperCase();

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.switchClass("hideContent", "showContent", 400);
  } else {
    linkText = "Show more";
    $content.switchClass("showContent", "hideContent", 400);
  };

  $this.text(linkText);
});

div.text-container {
  margin: 0 auto;
  width: 75%;
}

.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 2em;
}

.showContent {
  line-height: 1em;
  height: auto;
}

.showContent {
  height: auto;
}

h1 {
  font-size: 24px;
}

p {
  padding: 10px 0;
}

.show-more {
  padding: 10px 0;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div class="text-container">
  <h1>Title goes here</h1>
  <h2>Subtitle</h2>
  <div class="content hideContent">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    <p>Some more text</p>
    <ul>
      <li>Some more text</li>
      <li>Some more text</li>
      <li>Some more text</li>
    </ul>
  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

上面的代码仅是示例，但应该使您入门正确。