我想要一个显示“显示更多”的链接,单击该链接可以扩展另一个div的高度以显示所有内容。一旦div显示了所有内容,我希望链接更改为“少显示”,并在单击后进行相反的操作。
这是我到目前为止的内容,但是由于某些原因无法正常工作,请有人帮忙吗?
这是我到目前为止所拥有的:
$(document).ready(function() {
$('.entry-content').css('height', '400px');
$('.entry-content').css('overflow', 'hidden');
$('.show-more').click(function() {
$('.entry-content').animate({
'height': 'auto'
}, 500);
$('.show_more').html('Show Less');
$('.show_more').addClass('show_less');
$('.show_more').removeClass('show_more');
});
$('.show-less').click(function() {
$('.entry-content').animate({
'height': '400px'
}, 500);
$('.show_less').html('Show More');
$('.show_less').addClass('show_more');
$('.show_less').removeClass('show_less');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-content">
Curabitur sed enim sit amet nibh vulputate efficitur nec eget nulla. Vestibulum vel pulvinar magna. Etiam viverra vulputate lectus. Etiam dictum maximus ligula sed efficitur. Donec in dictum purus. Sed consequat quam eu eleifend convallis. Donec sapien
augue, volutpat ac nibh ac, molestie vulputate neque. Morbi eu fermentum est, eget vulputate quam. Phasellus et ante ipsum. Nullam tempus neque augue, nec accumsan erat hendrerit vel. Proin dolor sapien, pulvinar at rutrum quis, scelerisque vel ipsum.
Cras arcu nulla, placerat ac arcu vitae, iaculis maximus nisi. Nulla tincidunt, nisi id ultrices tempor, diam ipsum sollicitudin neque, ac consequat libero nulla eu diam.
</div>
<div class="another-div-elsewhere">
<a href="#" class="show-more">Show More</a>
</div>
最佳答案
请尝试以下代码段。
$(document).ready(function() {
$('.entry-content').css({'height':'40px','overflow': 'hidden'});
$('.show-more').on('click',function() {
if($(this).hasClass('less')){
$('.entry-content').animate({
'height': '40px'
}, 500);
$(this).html("Show More")
}
else{
$('.entry-content').animate({
'height': $(".entry-content").get(0).scrollHeight
}, 500);
$(this).html("Show Less")
}
$(this).toggleClass('less');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-content">
Curabitur sed enim sit amet nibh vulputate efficitur nec eget nulla. Vestibulum vel pulvinar magna. Etiam viverra vulputate lectus. Etiam dictum maximus ligula sed efficitur. Donec in dictum purus. Sed consequat quam eu eleifend convallis. Donec sapien
augue, volutpat ac nibh ac, molestie vulputate neque. Morbi eu fermentum est, eget vulputate quam. Phasellus et ante ipsum. Nullam tempus neque augue, nec accumsan erat hendrerit vel. Proin dolor sapien, pulvinar at rutrum quis, scelerisque vel ipsum.
Cras arcu nulla, placerat ac arcu vitae, iaculis maximus nisi. Nulla tincidunt, nisi id ultrices tempor, diam ipsum sollicitudin neque, ac consequat libero nulla eu diam.
</div>
<div class="another-div-elsewhere">
<a href="#" class="show-more">Show More</a>
</div>