用 jquery 切换 div 的高度

Question

我想要一个 link，上面写着 'show more'，当单击它时，它会扩展另一个 div 的高度以显示所有内容。一旦 div 显示所有内容，我希望 link 更改为 'show less' 并在单击后执行相反的操作。

这是我目前所拥有的，但由于某种原因它不起作用，有人可以帮忙吗？

这是我目前拥有的：

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

主要问题似乎是您在 ID #show-more 和 #show-less 上附加了 $.click() 事件，但您从未创建 #show-less... class .show_more 和 .show_less。我只是单独留下 $.click() 选择器，并切换 class .open 以确定 link/text 的状态，并更新 link 文本和文本高度基于此。

您可以 chain/combine 很多这样的命令，并使用变量来节省 jquery 一些必须重新运行选择器的工作。

我还将静态 400px 高度更改为 .entry-content 区域高度的一半，因为 400px 在此演示中不起作用。如果适合您，您可以将 staticHeight 改回 400px，或者修改我以前的内容以满足您的需要。

var $content = $('.entry-content'),
    contentHeight = $content.outerHeight(),
    $showMore = $('#show-more'),
    staticHeight = contentHeight / 2;

$content.attr('data-height',contentHeight).css({
  'height': staticHeight,
  'overflow':'hidden'
});

$showMore.on('click',function() {
  var height, text;
  if ($showMore.hasClass('open')) {
    $showMore.removeClass('open');
    height = staticHeight;
    text = 'Show More';
  } else {
    $showMore.addClass('open');
    height = contentHeight;
    text = 'Show Less';
  }
  $content.animate({
    'height': height
  }, 500);
  $showMore.html(text);
});

<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="#" id="show-more">Show More</a>
</div>

Answer 2

你可以这样做。

$(document).ready(function(){
    $('.read-more').on('click', function(e){
      e.preventDefault();
      $('.details').show();
      $('.summary').hide();
    })
    $('.read-less').on('click', function(e){
      e.preventDefault();
      $('.summary').show();
      $('.details').hide();
    });
});

.details {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="summary">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
  <span class="read-more">
   <a href="#">Show More....</a>
  </span>
</div>
<div class="details">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <span class="read-less">
   <a href="#">Show Less....</a>
  </span>
</div>

Answer 3

试试下面的代码片段。

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

Answer 4

首先你在class/id使用方面遇到了一些问题

另一件事是将高度设置为自动不是 possible！还有其他（如 CSS）方法可以执行此操作，但这里是您尝试执行的工作示例。希望对您有所帮助:-)

$(document).ready(function() {
  $('.entry-content').css('height', '100px');
  $('.entry-content').css('overflow', 'hidden');
});

$('#show_more').click(function() {
  if($(this).hasClass('show_more')){
       $(this).html('Show Less');
       $('.entry-content').animate({
          'height': '200px'
       }, 500);
  }
  else{
      $(this).html('Show More');
      $('.entry-content').animate({
          'height': '100px'
      }, 500);
  }

  $(this).toggleClass('show_less');
  $(this).toggleClass('show_more');
});

<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.
  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.
   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.
 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.
</div>

<div class="another-div-elsewhere">
  <a href="#" id="show_more" class="show_more">Show More</a>
</div>

用 jquery 切换 div 的高度

Toggle the height of a div with jquery

html

javascript

css

jquery

jquery-animate