我想要实现的是创建一个read more按钮，它只会在包装器中的文本中断时显示。
这是我到目前为止的代码：
HTML
<div class="comment-wrapper">
<div class="text">
Lorem ipsum. Lorem ipsum Lorem ipsum. Lorem ipsum Lorem ipsum. ipsum. Lorem ipsum
Lorem ipsum. Lorem ipsum Lorem ipsum. Lorem ipsum Lorem ipsum. Lorem ipsum
Lorem ipsum. Lorem ipsum.
</div>
<div class="read-more">Read more</div>
<div class="read-less">Read less</div>
</div>
CSS
.read-more{
font-size: 12px;
margin-top: 12px;
cursor: pointer;
display: block;
text-align: left;
}
.read-less{
font-size: 12px;
margin-top: 12px;
cursor: pointer;
display: none;
text-align: left;
}
.comment-wrapper.open .read-more {
display: none;
}
.comment-wrapper.open .read-less {
display: block;
}
.comment-wrapper .text {
text-align: left;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.comment-wrapper.open .text {
display: block;
}
JS
jQuery(".read-more").on("click",function(){
jQuery($(this)).parent('div').addClass('open');
});
jQuery(".read-less").on("click",function(){
jQuery($(this)).parent('div').removeClass('open');
});
有没有人建议一下如何在这段代码中实现这一点？
先进的谢谢！
window.addEventListener('load', function() {
var scrollHeight = document.getElementsByClassName('text')[0].scrollHeight;
var clientHeight = document.getElementsByClassName('text')[0].clientHeight;
if( scrollHeight > clientHeight ) {
$('.read-more').show();
} else {
$('.read-more, .read-less').hide();
}
$(".read-more").on("click",function(){
$('.read-more, .read-less').toggle();
});
$(".read-less").on("click",function(){
$('.read-more, .read-less').toggle();
});
}）；
