我有一个包含简单文本的 div。我应该只显示 3 行带有 showMore 链接的文本。单击 showMore 链接时，我需要使用 showLess 链接显示其中的所有文本。现在我正在使用 overflow 属性来实现这一点。但是有一个小问题，我应该在文本后立即显示 "showMore" 链接。那么如何在文本中放置超链接呢？
我的代码
jQuery(document).ready(function () {
jQuery('.showMore').click(function (event) {
var contentDiv = jQuery('.contentDiv');
contentDiv[0].style.height = 'auto';
jQuery(event.target).hide();
jQuery('.showLess').show();
});
jQuery('.showLess').click(function (event) {
var contentDiv = jQuery('.contentDiv');
var lineHeight = getLineHeight(contentDiv[0]);
contentDiv[0].style.height = lineHeight * 3 + 'px';
jQuery(event.target).hide();
jQuery('.showMore').show();
});
});
<!doctype html>
<html>
<body >
<div>
<div class = "contentDiv">
some content <br r1<br> r2<br> r3 <br> r4<br> r5
</div>
<a href = '#' class = "showMore">Show More</a>
<a href = '#' class = "showLess">Show Less</a>
</div>
</body>
</html>
.contentDiv a {
float : right;
}
.contentDiv {
overflow: hidden;
height:3.6em;
background:#ccc;
font-size : 12pt ;
font-family :Courier;
}
.showMore {
float: right;
}
.showLess {
position: relative;
float: right;
display : none;
margin-bottom : 5px
}
最佳答案
这只是实现此目标的百万种方法之一:fiddle
HTML
<div id="text">Lots of text..</div>
<a href="#" id="showmore">Show More</a>
<a href="#" id="showless">Show Less</a>
CSS
#text {height:55px;overflow:hidden;}
#showless {display:none;}
jQuery
$('#showmore').on('click', function(e){
$('#text').css('overflow', 'visible').css('height', 'auto');
$('#showless').show();
$(this).hide();
e.preventDefault();
});
$('#showless').on('click', function(e){
$('#text').css('overflow', 'hidden').css('height', '55px');
$('#showmore').show();
$(this).hide();
e.preventDefault();
});
要将“显示更多”放置在右下角(按照您后续评论中的要求)，请将 <a>在 div 内标记并绝对定位。 Fiddle
HTML
<div id="text">Lots of text..
<a href="#" id="showmore">Show More</a>
</div>
<a href="#" id="showless">Show Less</a>
CSS
#text {height:55px;overflow:hidden;position:relative;}
#showmore {position:absolute;bottom:0;right:0;background:#fff;padding-left:10px;}
#showless{display:none;}
关于html - 超链接的定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14452542/