Question

我有一个用jquery动画的导航菜单，当我点击一个元素时，我希望其他菜单声音崩溃。请参阅代码以查看我尝试执行该操作但未成功。此外，当我点击我用来打开它的相同元素，或者如果我点击其他主要元素（橙色）时，我希望菜单声音崩溃，而不是当我点击儿童元素（白色）时。对不起我的英文，我希望它清楚。请参阅jsfiddle以澄清。取消注释该行以查看我的尝试。

http://jsfiddle.net/uwv0a6bL/

$('.main-nav li a').on('click', function(event) {

// $('.main-nav li a').not(this).parents().removeClass('open');

$(this).siblings('.submenu').toggleClass('open');    

});

Answer 1

$('.main-nav li a').on('click', function(event) {

    // $('.main-nav li a').not(this).parents().removeClass('open');

    $(this).siblings('.submenu').toggleClass('open');   
    $(this).parent().siblings().children('.open').removeClass('open');

});

http://jsfiddle.net/uwv0a6bL/6/

Answer 2

我认为您的功能可能如下所示：

$('.main-nav li a').on('click', function(event) {

// $('.main-nav li a').not(this).parents().removeClass('open');
$('.submenu').removeClass('open');
$(this).siblings('.submenu').toggleClass('open');


});

这是一个更新的小提琴：http://jsfiddle.net/uwv0a6bL/20/

Answer 3

一种可能的解决方案：

$('.main-nav li a').on('click', function(event) {
    var submenu = $(this).siblings('.submenu');
    $('.submenu').not(submenu).removeClass('open');
    submenu.toggleClass('open');
});

点击此链接jsfiddle查看一个有效的示例。

希望它有用！

jQuery动画导航如何在点击时折叠其他元素

3 个答案: