Question

我正在尝试使用jquery使div滑下（动画可见）。动画不流畅，最后跳跃。

<div class="container">
  <div class="row">
    <ul class="items">
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
    </ul>
    <ul class="more-items">
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
    </ul>
  </div
  <div class="row">
    <a id="show-more-btn" class="show-more-items">
      <i class="glyphicon glyphicon-plus"></i>
      <span class="text">Vis flere</span>
    </a>
  </div>
</div>

这是一个众所周知的问题，是由于jquery不知道动画元素的高度造成的。所以我在文件“就绪”上创建了一个函数来计算隐藏之前滑动元素的高度。

$(document).ready(function() {

  $('.more-items').css('height',function(i,h){
    alert(h);  
    $(this).hide();
      return h;
  });

  $("#show-more-btn").on("click", function(e) {
    e.preventDefault();
    $(".more-items").slideDown();
  });

});

这很有效，但当元素位于BS3网格行内时，高度始终为0px ...

为什么这样，我怎样才能确保元素在BS网格内有高度？

我无法使用BS“collapse（）”函数，因为我无法在我正在处理的网站上加载BS js文件。

示例 拖动窗口足够宽以查看3列。
https://jsfiddle.net/vn1z6z9L/。

Answer 1

好的，我找到了解决方案！如果我把col-sm-12放在<ul>上它会得到一个高度。在隐藏.more-items列表之前我甚至不需要计算它： - ）

更新了jsfiddle：https://jsfiddle.net/vn1z6z9L/3/

<div class="container">
  <div class="row">
    <ul class="items col-sm-12">
      <li class="item col-sm-4">asf</li>
      <li class="item col-sm-4">dd</li>
      <li class="item col-sm-4">ssddf</li>
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
    </ul>
    <ul class="more-items col-sm-12">
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">as</li>
      <li class="item col-sm-4">sdf</li>
      <li class="item col-sm-4">sdf</li>
    </ul>
  </div>

Answer 2

我做了一些改变 https://jsfiddle.net/vn1z6z9L/2/

$(document).ready(function() {
 $("#show-more-btn").on("click", function(e) {
 e.preventDefault();
 $(".more-items").slideToggle();
});   

});

和

.more-items{
 display:none;
 }

slideToggle（）方法在所选元素的slideUp（）和slideDown（）之间切换。

此方法检查所选元素的可见性。

如果隐藏了某个元素，则会运行slideDown（）。如果是，则运行slideUp（）   元素是可见的 - 这会创建一个切换效果。

因此，您不需要使用BS崩溃。

jQuery SlideDown跳转到Bootstrap 3行

2 个答案: