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

Question

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

这是菜单:

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

这是为其提供 Accordion 功能的代码片段:

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