显示更多并且按下按钮显示较少

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>