按按鈕顯示更多而更少顯示

Question

我想創建一個名為Read More的按鈕

單擊后將顯示更多內容。 當顯示內容時，按鈕文本應更改為Read less 。

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

有人知道如何解決此問題嗎？

任何建議和/或幫助將不勝感激。

---

（這里只是我嘗試過的內容）

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

我通常不用Java語言就能解決

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

小提琴示例-更新

Answer 4

切換越來越 少的文本有一個錯誤：

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

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

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

對於<button>通過.text()獲取文本，並通過.html('text')設置文本

對於<input type="button">通過.val()獲取文本，並通過.val('text')設置文本

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