显示和隐藏UL标签

Question

我有以下HTML：

<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不会显示。

有人知道怎么解决这个问题吗？

Answer 1

这对我来说很好：

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

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

Answer 2

我发现了问题。。。我在最初的问题中发布了我的问题：

nav ul ul {display: none;}

但事实上，我有以下几点：

nav ul ul {display: none !important;}

我当时用的是一个"隐藏"较少的混音，但没有意识到。。。

但是，使用重要功能会阻止Jquery Toggle工作，这不是很奇怪吗？