Question

我想创建一个名为Read More

的按钮

单击时会显示更多内容。当它显示内容时，按钮文本应更改为Read less。

＆＃13;

$(".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;
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

非常感谢任何建议和/或帮助。

(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;
}

希望这对你有用。

Answer 2

我通常在没有Javascript的情况下解决它，

.text-container {
  padding: 1em;
  border: 3px double;
  position: relative;
  padding-bottom: 3em;
}
.text-container .read-more {
  position: absolute;
  bottom: .5em;
 }
input.read-more-toggle { display: none; }
.read-more span { display: block; color: red; cursor: pointer; text-decoration: underline; }
.read-more span:last-child { display: none; }
input:checked + .read-more span:last-child { display: block; }
input:checked + .read-more span:first-child { display: none; }
.text-content {
  overflow: hidden;
  line-height: 1.5;
}
.read-more + .text-content {
  max-height: 3em;
  transition: max-height 1s;
}
input:checked + .read-more + .text-content {
  max-height: 50em;
}

<div class="text-container">
  <input type=checkbox id=more-text-toggle-1 class=read-more-toggle />
  <label class="read-more" for="more-text-toggle-1">
    <span>read more</span>
    <span>read less</span>
  </label>
  <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>

Answer 3

你可以试试这个

HTML

<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">
    <button>Read More</button>
  </div>
</div>

Jquery的

$(".read-more button").on("click", function() {

  var $content = $link.parent().prev("div.text-content");

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

  if ($(this).text() == 'Read More')
    $(this).text('Read Less');
  else
    $(this).text('Read More');
  return false;
});

Example Fiddle - UPDATED

Answer 4

切换更多和更少文字时出错：

＆＃13;

$(".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));
});

function getShowLinkText(currentText) {
    var newText = '';

    if (currentText.toUpperCase() == "READ MORE") {
        newText = "Read Less";
    } else {
        newText = "Read More";
    }

    return newText;
}

＆＃13;

.short-text{color:#000000}
.full-text{color:#ff8800}

＆＃13;

<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>

＆＃13;

<button> .text()按.html('text')获取文字并按<input type="button">

设置文字

.val() .val('text')按{{1}}获取文字并按{{1}}

设置文字

Answer 5

您只需在功能中切换“更多”/“更少”：

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

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

小提琴：https://jsfiddle.net/4cgbLne4/5/

Answer 6

只需在此处添加一个标记，并在点击标记时更改条件

var token = 1;
$(".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));

        if(token == 1)
    {
        $(this).text("Read Less");
      token = 0;
    }
    else
    {
        $(this).text("Read More");
        token = 1;
    }

    return false;
});

这是jsFiddle

按钮显示更多并显示更少

6 个答案: