jQuery SlideDown прыгает в Bootstrap 3 ряд

Question

Я пытаюсь сделать слайд слайда вниз (оживляющий видимый) с помощью jquery. Анимация не гладкая и прыгает в конце.

<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 сетки ?

Я не могу использовать функцию «collapse()» BS, потому что я не могу загрузить BS js-файл на сайт, над которым я работаю.

ПРИМЕРПеретащите окно достаточно широко, чтобы увидеть 3 колонки.
https://jsfiddle.net/vn1z6z9L/.

Answer 1

OK Я нашел решение! Если я поставлю col-sm-12 на <ul>, он получит высоту. Я даже не нужно вычислить его до сокрытия списка .more-пунктов :-)

Обновлено 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.