afficher et masquer UL Tag

Question

je le code HTML suivant:

<nav class="menu" role="navigation"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">Content</a> 
     <ul> 
     <li><a href="#">Files</a></li> 
     <li><a href="#">Posts</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Site</a></li>    
    </ul> 
</nav> 

Avec les styles CSS suivants:

nav ul ul {display: none;} // Hides the child menus 

Et le code JQuery suivant:

$('nav.menu a[href="#"]').click(function() { 
    $(this).next('ul').toggle(); 
}); 

qui devrait passer la visibilité des menus enfants.

Cependant, lorsque je clique sur la balise "Content" A, l'UL suivante n'apparaît pas.

Est-ce que quelqu'un sait comment résoudre ce problème?

Answer 1

Ce travail très bien pour moi:

$(document).ready(function(){  
    $('nav.menu a[href="#"]').click(function() { 
     $(this).next('ul').toggle(); 
    }); 
}); 

Il basculer correctement le menu ul à côté de <a href="#">Content</a>

Answer 2

J'ai trouvé le problème ... j'ai posté dans ma première question que j'avais:

nav ul ul {display: none;} 

Mais j'avais en fait ce qui suit:

nav ul ul {display: none !important;} 

Je travaillais avec un « Masquer » MOINS mixin pour elle et ne le savais pas ...

Mais est-il pas étrange que l'utilisation importante arrête de travailler Jquery à bascule?