显示和隐藏UL标签

我有以下HTML：显示和隐藏UL标签

<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>

用下面的CSS样式：

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

而下面的jQuery代码：

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

哪些应该切换子菜单的可见性。

但是，当我点击“内容”A标签时，下一个UL不显示。

有谁知道如何解决这个问题？

来源

2013-08-29 Miguel Moura

看起来对我很好：http://jsfiddle.net/YxZH8/ –

@JasonP奇怪，我复制了他的代码，它不起作用：http://jsfiddle.net/HHVMu/ –

你没有包括jQuery在你的小提琴中。 – j08691

这项工作对我蛮好：

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

它正确地切换UL旁边的菜单<a href="#">Content</a>

来源

2013-08-29 14:11:02 vdubus

我发现这个问题...我张贴在我，我有最初的问题：

nav ul ul {display: none;}

但事实上我有以下几点：

nav ul ul {display: none !important;}

我正在使用一个“隐藏”LESS mixin并没有意识到它...

但使用重要的停止Jquery从工作切换不奇怪吗？

来源

2013-08-29 14:14:12

_不奇怪......_ - 不，因为jQuery只是切换显示（或可能是可见的）属性。 '！important'覆盖了jQuery的功能。 –

显示和隐藏UL标签

回答

相关问题