javascript - 通过按钮显示更多和更少

Question

我想创建一个名为阅读更多的按钮

点击时会显示更多内容。当它显示内容时，按钮文本应更改为少读。

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

  $content.toggleClass("short-text, full-text");

  $link.text(getShowLinkText(linkText));

  return false;
});

function getShowLinkText(currentText) {
  var newText = '';

  if (currentText.toUpperCase() === "READ MORE") {
    newText = "Read More";
  } else {
    newText = "Read Less";
  }

  return newText;
}

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

.text-content{
  line-height: 1em;
}

.short-text {
  overflow: hidden;
  height: 2em;
}

.full-text{
  height: auto;
}

h1 {
  font-size: 24px;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="text-container">
  <div class="text-content short-text">
    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.
  </div>
  <div class="read-more">
    <a href="#">Read More</a>
  </div>
</div>

有人知道如何解决这个问题吗？

任何建议和/或帮助将不胜感激。

<小时/>

(Here a jfiddle what I have tried)

Answer 1

我更新了你的答案。请尝试这个。 https://jsfiddle.net/4cgbLne4/12/

<div class="text-container">
    <div class="text-content short-text">
        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.
    </div>
    <div>
        <button href="#" class="read-more">Read More</button>
    </div>
</div>

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

    $content.toggleClass("short-text, full-text");

    $link.text(getShowLinkText(linkText));

    return false;
});

function getShowLinkText(currentText) {
    var newText = '';
        alert(currentText)
    if (currentText.toUpperCase() === "READ MORE") {
        newText = "Read Less";
    } else {
        newText = "Read More";
    }

    return newText;
}

希望这对您有用。