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();
});

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

然而，当我点击“Content”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;}

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

但使用重要的Jquery Toggle工作是不是很奇怪？

显示和隐藏UL标签

2 个答案: