jQuery UI toggleClass

Question

我以前问过类似的问题，我已经看过几个类似的Q&，但它们都不符合我的要求(或者我根本不具备让它们工作的js知识！)。

我有一个使用jQuery UI toggleClass来显示和隐藏子菜单的simple css/jquery menu设置。

我想改进这一点，当另一个子菜单被点击时，关闭任何打开的子菜单。有人能给我解释一下怎么做吗？谢谢。

Answer 1

将此代码添加到您的函数：

$(this).parent().siblings().find('ul:not(.navhidden)').addClass('navhidden', 'fast');

这是你的小提琴，更新：http://jsfiddle.net/abKhH/1/

P.S. @Colin的解决方案也适用，但我认为上面的解决方案更好一些，因为它同时打开和关闭面板。

Answer 2

我在您的jQuery中添加了一行代码，用于确保在打开所单击的子菜单之前，所有的子菜单都已关闭。

jsfiddle

Answer 3

反应有点慢，但有额外的答案也没什么坏处！编辑:这确实有轻微的性能提升，因为由于链接，它只运行$('#main-nav a.dd')选择器一次。如果您不熟悉，.end()通过转到前一个选择来取消.next()。

$('#main-nav a.dd').next().addClass('navhidden')
    .end().click(function() {
        $('#main-nav a.dd').not(this).next().each( function() {
            if ( !$(this).hasClass("navhidden") ) {
                $(this).addClass("navhidden");
            }
        });
        $(this).next().toggleClass('navhidden', 'fast');
        return false;
});

http://jsfiddle.net/6Qer7/