Имея вопрос о Bootstrap 3 SlideDown() скрытый элемент

Question

Можете ли вы, пожалуйста, посмотрите на this demo и дайте мне знать, почему функция change() не может slideDown()hidden элемент в Bootstrap 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/

Answer 2

Это происходит потому, что скрытый класс заставляет элемент всегда быть скрыты. Я уверен, что он делает что-то вроде:

display: none !important; 

Таким образом, вы должны изменить свой код, чтобы удалить этот класс после скольжения элемент вниз. Или использовать свой собственный CSS, чтобы скрыть элемент (так что вы не имеете !important там

Если вы измените JSFiddle иметь CSS:.

#hidden-list-1 { 
    display: none; 
} 

И удалить hidden класс, вы увидите что он работает, как ожидалось

Answer 3

Казалось бы, вопрос важный тег в CSS из документации Bootstrap (http://getbootstrap.com/css/), шоу и скрытые классы отмечены важными:..

.show { 
     display: block !important; 
    } 
    .hidden { 
     display: none !important; 
    } 

Изменения css, примененные jQuery slideDown(), скорее всего, будут проигнорированы. Если вы возьмете это и замените на style="display:none;" без важного, то slideDown() будет работать. Я добавил, что на скрипке: https://jsfiddle.net/zzdL5jp7/1/

Answer 4

вы добавили #hidden-list-1 и #hidden-list-2hidden класс отменяя изменения отображения свойств сделано вашим JS. Удаление класса hidden и объявление обоих элементов, скрытых в CSS, решит вашу проблему.

Answer 5

обновление ваш CSS код

.show { 
    display: block !important; 
} 
.hidden { 
    display: none !important; 
}