顯示更多並且按下按鈕顯示較少

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>

有誰知道如何解決這個問題？

任何意見和/或幫助將非常感激。

---

(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

你可以試試這個

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 3

有在切換更多和少文本錯誤：

$(".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"> GET文字.val()，並設置文字.val('text')

Answer 4

你只需要切換「更多」 /在你的函數「少」：

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 5

只需添加一個令牌到這一點，並在標籤上的點擊改變條件

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

Answer 6

我通常解決它不使用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>