Question

的jQuery

$(".facts").click(function(e) {
  if($(this).height() >50) {
    $(this).animate({height:50+'px'});
    $(this).find('.servicedrop').toggleClass('fa-caret-up fa-caret-down');
    $(this).removeClass("facts_active");
  }else{
    if ( $(".facts_active").length) {
      $(".facts_active").animate({height:50+'px'});
    }
    $(this).animate({height:350 + 'px'});
    $(this).find('.servicedrop').toggleClass('fa-caret-down fa-caret-up');
    $(this).addClass("facts_active");
  }
});

我希望动画height:350px到height，而不是动画到"auto"，以使我的手风琴响应。我用Google搜索并阅读了一些解决方案，但我不知道如何将其添加到代码中。

帮助我真是太好了。

Answer 1

正如评论中所述，您无法动画显示height:auto;，但您可以通过设置max-height动画并将有效max-height设置为您知道的值来解决问题永远不会超过。您也可以用更少的Javascript来完成，因为可以使用CSS3处理动画：

＆＃13;

$(function() {
  $('.facts').click(function() {
    $(this).toggleClass('active');
  });
});

＆＃13;

.facts {
  width:300px;
  max-height:50px;
  overflow:hidden;
  margin-bottom:20px;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}
  .facts.active {
    max-height:9999px; /*Height value which will not be exceeded*/
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>
<div class="facts">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat justo, eu sagittis enim consequat id. Donec luctus luctus aliquam. Curabitur libero neque, interdum in nulla at, semper malesuada ligula. Donec tincidunt ipsum sit amet libero euismod, vel placerat est elementum. Fusce rhoncus molestie venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus rhoncus nisl nisl, sit amet suscipit est ultrices non. Nunc odio massa, tincidunt scelerisque venenatis sed, scelerisque nec leo.
</div>

＆＃13;

Answer 2

您可以使用$('select').height();

动态计算高度来完成此操作

$(".facts").click(function(e) {
  if($(this).height() >50) {
    $(this).animate({height:50+'px'});
    $(this).find('.servicedrop').toggleClass('fa-caret-up fa-caret-down');
    $(this).removeClass("facts_active");
  }else{
    if ( $(".facts_active").length) {
      $(".facts_active").animate({height:50+'px'});
    }
    var computedH =  $(this).height(); // compute div's height including content
    $(this).animate({height: computedH + 'px'}); // now you can animate the computed height

    $(this).find('.servicedrop').toggleClass('fa-caret-down fa-caret-up');
    $(this).addClass("facts_active");
  }
});

Answer 3

你可以在这个小提琴上做点什么。

https://jsfiddle.net/pparas/frw0opfv/6/

您必须计算所需的高度，然后为其设置动画。

$(".facts").click(function(e) {
    var newHeight = $('div.inner').height();
    $(this).animate({
        height: newHeight
    });
});

类似于@Arun Sharma的回复。

希望有所帮助。

伞兵

如何将高度设置为自动？

3 个答案: