Avendo problema su Bootstrap 3 slideDown() nascosto Elemento

Question

Potete per favore dare un'occhiata a this demo e fammi sapere il motivo per cui la funzione change() non è in grado di slideDown() un elemento hidden in Bootstrap 3?

Qui è il codice che ho

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

Answer 1

Come le altre risposte hanno già detto il problema è bootstrap ha uno stile come questo modo

.hidden{ 
    display: none !important; 
} 

Uno per risolvere questo è rimuovendo classe di nascosto.

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

Ecco una demo https://jsfiddle.net/dhirajbodicherla/zzdL5jp7/3/

Answer 2

Questo è perché la classe nascosta costringe un elemento da sempre nascosto. Sono abbastanza sicuro che fa qualcosa di simile:

display: none !important; 

quindi bisogna modificare il codice per rimuovere quella classe dopo scivolare l'elemento verso il basso. O utilizzare il proprio CSS per nascondere l'elemento (in modo da non avete !important ci

Se si modifica il JSFiddle per avere il CSS:.

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

e rimuovere la classe di hidden, vedrete che funziona come previsto

Answer 3

sembra essere un problema del tag importante nel CSS Dalla documentazione Bootstrap (http://getbootstrap.com/css/), lo spettacolo e le classi nascoste sono contrassegnati con importanti:..

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

Le modifiche css applicate da jQuery slideDown() sono molto probabilmente ignorate. Se lo estrai e lo sostituisci con uno style="display:none;" senza l'importante, la diapositiva() funzionerà. Ho aggiunto che al violino: https://jsfiddle.net/zzdL5jp7/1/

Answer 4

La classe hidden che hai aggiunto a #hidden-list-1 e #hidden-list-2 è prevalente la modifica della proprietà di visualizzazione fatto dal vostro JS. La rimozione della classe hidden e la dichiarazione di entrambi gli elementi nascosti in CSS risolveranno il tuo problema.

Answer 5

aggiornare il codice css

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