请看一下脚本:
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不需要更多的阅读,所以它怎么能被隐藏?
发布于 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>
发布于 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();
}
});
});
https://stackoverflow.com/questions/-100008764
复制相似问题