jQuery SlideDown 跳转 Bootstrap 3 行

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 不知道要设置动画的元素的高度引起的。所以我在文档 "ready" 上做了一个函数来计算隐藏前滑动元素的高度。

$(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 文件。

EXAMPLE 将 window 拖动到足以看到 3 列的宽度。
https://jsfiddle.net/vn1z6z9L/。

Answer 1

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

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

});

和

.more-items{
 display:none;
 }

The slideToggle() method toggles between slideUp() and slideDown() for the selected elements.

This method checks the selected elements for visibility.

slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.

Thus you don't need to use the BS collapse .

Answer 2

好的，我找到了解决方案！如果我将 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>

jQuery SlideDown 跳转 Bootstrap 3 行

jQuery SlideDown jumps in Bootstrap 3 row

javascript

css

jquery

slidedown

twitter-bootstrap