jQuery SlideDown saute dans Bootstrap 3 row

Question

J'essaie de faire descendre un div (animation visible) avec jquery. L'animation n'est pas lisse et saute à la fin.

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

C'est un problème bien connu, car jquery ne connaît pas la hauteur de l'élément à animer. J'ai donc fait une fonction sur le document "prêt" pour calculer la hauteur de l'élément coulissant avant de se cacher.

$(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(); 
    }); 

}); 

Cela fonctionne parfaitement, mais lorsque l'élément est à l'intérieur d'une grille de BS3 rangée la hauteur est toujours 0px ...

Pourquoi est-ce et comment puis-je faire en sorte que l'élément a une hauteur à l'intérieur de la grille BS ?

Je ne peux pas utiliser la fonction BS "collapse()" car je ne peux pas charger le fichier BS js sur le site sur lequel je travaille. Faites glisser la fenêtre suffisamment large pour voir les 3 colonnes. EXEMPLE

EXEMPLE
https://jsfiddle.net/vn1z6z9L/.

Answer 1

OK J'ai trouvé la solution! Si je mets col-sm-12 sur le <ul> il obtient une hauteur. Je ne ai même pas besoin de calculer avant de se cacher la .plus-liste des articles :-)

Mise à jour 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

je fait quelques modifications https://jsfiddle.net/vn1z6z9L/2/

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

}); 

Et

.more-items{ 
display:none; 
} 

Procédé slideToggle() permet de basculer pour les éléments sélectionnés entre slideUp() et slideDown().

Cette méthode vérifie la visibilité des éléments sélectionnés. SlideDown() est exécuté si un élément est masqué.

slideUp() est exécuté si un élément est visible - Cela crée un effet de bascule.

Ainsi, vous n'avez pas besoin d'utiliser l'effondrement BS.