我有六个框，每个框包含一个段落，每个段落具有不同的内容。字符限制设置为200个字符。200个字符后，其余内容（如果有）将被隐藏，直到用户单击Show More链接为止。
当用户单击Show Less链接时，文本显示将返回到字符数限制。但是，事实并非如此。当用户单击Show More链接时，将显示所有内容，但是当用户单击Show Less链接时，内容不会收缩。
我看到了其他有关显示和隐藏内容的SO帖子，但是在解决他们的问题以解决我的问题后，我仍然迷失了方向。这是我第一次实现jQuery，因此请在这种基本水平上感到困惑。
对于为什么Show Less不缩小内容的任何建议，我们将不胜感激。
<div class="col-md-8" id="article">
<?php
$text = $page->Article_Text;
?>
<script>
$(document).ready(function(){
var readMoreHTML = $(".read-more").html();
var lessText = readMoreHTML.substr(0, 200);
if(readMoreHTML.length > 200){
$(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
} else{
$(".read-more").html(readMoreHTML);
}
$("body").on("click", ".read-more-link", function(event){
event.preventDefault();
$(this).parent(".read-more").html(readMoreHTML).append("<a href=''class='show-less-link' style='color:gray; text-decoration:none'>Show Less</a>");
});
$("body").on("click", ".show-less-link", function(event){
event.preventDefault();
$(this).parent(".read-more").html(readMoreHTML.subtr(0,200)).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
});
});
</script>
<div class="content">
<div class="read-more">
<?php echo $text ?>
</div>
</div>
</div><!--#article-->
（请原谅内联CSS，因为它仅用于测试目的）。
在JS的最后一部分中，只需使用您的lessText变量即可。jQuery.html()方法不能接受readMoreHTML.subtr(0,200)作为输入。
$(this).parent(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
有效的Codepen：http：//codepen.io/staypuftman/pen/akZdzg
并在此处附加运行代码。你可以检查输出
$(document).ready(function () {
var readMoreHTML = $(".read-more").html();
var lessText = readMoreHTML.substr(0, 200);
if (readMoreHTML.length > 200) {
$(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
} else {
$(".read-more").html(readMoreHTML);
}
$("body").on("click", ".read-more-link", function (event) {
event.preventDefault();
$(this).parent(".read-more").html(readMoreHTML).append("<a href=''class='show-less-link' style='color:gray; text-decoration:none'>Show Less</a>");
});
$("body").on("click", ".show-less-link", function (event) {
event.preventDefault();
$(this).parent(".read-more").html(lessText).append("<a href=''class='read-more-link' style='color:gray; text-decoration:none'>Show More</a>");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="read-more">
Details of G.M.’s decision-making process almost 20 years ago, which has not been reported previously, suggest that a quest for savings of just a few dollars per airbag compromised a critical safety device, resulting in passenger deaths. The findings also indicate that automakers played a far more active role in the prelude to the crisis: Rather than being the victims of Takata’s missteps, automakers pressed their suppliers to put cost before all else.
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句