javascript - 使用jquery切换div的高度

Question

我想要一个显示“显示更多”的链接，单击该链接会扩展另一个 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>

Answer 1

尝试下面的代码片段。

$(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>