在Bootstrap 3上有问题SlideDown()隐藏元素

Question

能否请您看看这个演示,让我知道为什么change()功能无法slideDown()一个hidden元素在引导3？

这是我的代码

$(function() {
    $('input:radio').change(function() {
        if($(this).val()== 'Dog') {
            $('#hidden-list-1').slideDown();
        }
        if($(this).val()== 'Bird'){
            $('#hidden-list-2').slideDown();  
        }
    });
});

Answer 1

正如其他答案已经提到的那样,问题是boostrap有这样的风格

.hidden{
  display: none !important;
}

解决这个问题的一种方法是删除隐藏的类.

$('#hidden-list-1').hide().removeClass('hidden').slideDown();

这是一个演示https://jsfiddle.net/dhirajbodicherla/zzdL5jp7/3/