Bootstrap/jquery单击以在表中显示多个隐藏的行

我已经尝试了几种不同的解决方案[在堆栈交换中找到]但似乎无法让我的示例正常工作.

如何设置此表以便单击"可点击"TR显示之后的所有隐藏行？

这是[浓缩]表,注意它的bootstrap3'悬停'类型:

    

        

    

    

        

            
visible row
            
 
        
        

            
hidden row
            
 
        
        

            
hidden row
            
 
        

        

            
visible row
            
 
        
        

            
hidden row
            
 
        
        

            
hidden row
            
 
        
    

这里是我用来尝试揭示隐藏行的JS.

$(".clickable").click(function() {
    var id = $(this).attr('id');
    var target = '#'+id+'collapsed';

    if($(target).hasClass("out")) {
        $(target).addClass("in");
        $(target).removeClass("out");
    } else {
        $(target).addClass("out");
        $(target).removeClass("in");
    }
});

单击"可点击"行,仅显示第一个[或可能最后]隐藏的TR.

1> Zim..：

---

使用data-toggle='collapse'和data-target.此外,在子行上使用class而不是id.

  

        

    
    

        

            
visible row
            
 
        
        

            
hidden row
            
 
        
        

            
hidden row
            
 
        

        

            
visible row
            
 
        
        

            
hidden row
            
 
        
        

            
hidden row
            
 
        
    

演示:http://www.bootply.com/122870

---

是.这是因为Bootstrap在'collapsing'课上的过渡动画.你可以通过减少效果的时间来加快速度:`.collapsing {-webkit-transition:height .01s easy; 过渡:高度.01s轻松}`我更新了演示:http://www.bootply.com/122870