jQuery：仅选择 ul，而不选择 ul ul

Question

我正在尝试使用 jQuery 提交一个基本的手风琴样式菜单。

这是菜单：

http://www.cybart.com/bscg/

这是一段代码，给它手风琴功能：

$('#access ul li').click(function(){
        $('#access ul ul:visible').slideUp();
        $(this).children('ul:hidden').slideDown();

    });

问题：单击子菜单链接会使子菜单向上滑动（并关闭）。

我想在单击子菜单链接并向上滑动时保持子菜单打开仅有的当点击顶级链接时。

如何使用 jQuery 仅选择顶级 ul 来为子菜单设置动画？或者有没有办法选择子菜单链接并“告诉它”以在单击时保持子菜单打开？

我会欣赏你的智慧！

Answer 1

看来你需要在 CSS 中使用 > 运算符。

<代码>.foo> .bar 选择类 bar 的所有元素，该元素是类 foo 的元素的直接子元素

明白了，工作代码：

$('#access ul.menu > li > a').click(function(){
        $('#access ul ul:visible').slideUp();
        $(this).siblings('ul').slideDown();
    });
}); 

---

防止菜单滑回再次起来，这有效：

$('#access ul.menu > li > a').click(function(){
        var siblingUl = $(this).siblings('ul');
        if(siblingUl.is(':visible')) { // The currently open menu was clicked
            // Remove this if you want nothing to happen
            siblingUl.slideUp();
            return;
        }

        $('#access ul ul:visible').slideUp();
        siblingUl.slideDown();
    });
}); 

Answer 2

您无法阻止菜单关闭，因为当您单击链接时，浏览器正在发出新请求并重新加载菜单。只需观看 URL 栏即可。当您单击子菜单链接时，URL 会发生变化。

您需要在 URL 中添加一些内容以阻止子菜单折叠，或者测试 URL 以查看页面加载后是否应重新打开折叠面板。

Answer 3

这更简单并且对我有用。

$(".parent").click(function() {
   $(this).children('ul').slideToggle();
});

Answer 4

我花了 10 分钟来阅读和理解你的代码，因为你有很多样式和 id，这使得它变得非常复杂，请注意最佳实践，

你所需要的就是类似的东西

<ul>
  <li>
   <a class="menu">Menu</a>
    <ul>
       <li><a>Submenu</a></li>
    </ul>
  </li>
  <li>Other menu</li>
</ul>

...

$(document).ready(function(){

  $(".menu").click(function(){
      $(this).next().toggle()
  })

})