HTML自动隐藏/显示中的“读取更多”按钮?
HTML自动隐藏/显示中的“读取更多”按钮?
提问于 2018-08-08 06:45:23
请看一下脚本：
document.querySelector('#b1').addEventListener('click', function() {
document.querySelector('#c1').style.height = 'auto';
this.style.display = 'none';
});
document.querySelector('#b2').addEventListener('click', function() {
document.querySelector('#c2').style.height = 'auto';
this.style.display = 'none';
});body {
font: 14px verdana;
}
#c1 {
overflow: hidden;
height: 5.6em;
line-height: 1.2em;
width: 100%;
}
#c2 {
overflow: hidden;
height: 5.6em;
line-height: 1.2em;
width: 100%;
}<div id="c1">
This is small para
</div>
<button id="b1">Read more</button>
<br /><br />
<div id="c2">
There's lot of text in this para. So the para is being very large. Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large. There's lot of text in this para. So the para is being very large.
Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large.There's lot of text in this para. So the para is being very large. Hence, it will show full text on clicking "Read more" button! The
texts are being repeated, so that para will be large. There's lot of text in this para. So the para is being very large. Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large.
</div>
<button id="b2">Read more</button>
对于第一段，#C1不需要更多的阅读，所以它怎么能被隐藏?
回答 2
Stack Overflow用户
发布于 2018-08-08 14:57:38
你可以遍历每个div检查它的文本内容。如果它小于一定的长度，你可以隐藏它的下一个元素，即按钮。
试试以下代码：
document.querySelector('#b1').addEventListener('click', function() {
document.querySelector('#c1').style.height = 'auto';
this.style.display = 'none';
});
document.querySelector('#b2').addEventListener('click', function() {
document.querySelector('#c2').style.height = 'auto';
this.style.display = 'none';
});
$(document).ready(function(){
$( "div" ).each(function( index ) {
if($(this).text().length < 100){
$(this).next().hide();
}
});
});body {
font: 14px verdana;
}
#c1 {
overflow: hidden;
height: 2.6em;
line-height: 1.2em;
width: 200px;
}
#c2 {
overflow: hidden;
height: 2.6em;
line-height: 1.2em;
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="c1">
This is small para
</div>
<button id="b1">Read more</button>
<br /><br />
<div id="c2">
There's lot of text in this para. So the para is being very large. Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large. There's lot of text in this para. So the para is being very large.
Hence, it will show full text on clicking "Read more" button! The texts are being repeated, so that para will be large.
</div>
<button id="b2">Read more</button>
Stack Overflow用户
发布于 2018-08-08 15:57:10
如果你想让它按照height而不是length of text：
$(document).ready(function(){
$( "div" ).each(function( index ) {
if($(this).text().length < 100){
$(this).next().hide();
}
});
});因此：
$(document).ready(function(){
$( "div" ).each(function( index ) {
if(parseFloat($(this).css('height')) < 150){ //change 150 to your desired height
//if height is less than desired, leave it unchanged and hide the button
$(this).next().hide();
}
else {
//if height is more than desired,
//set height to desired, hide the overflowing text
$(this).css('maxHeight', '150px').css('overflowY', 'hidden');
//and show the "Read More" button
$(this).next().show();
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100008764
复制相关文章
相似问题