我应该如何消失子菜单?

时间:2015-10-26 11:48:26

标签: jquery html css

我在我的项目中使用导航菜单。菜单有几个菜单,再次有子菜单和超级菜单。当我点击一个子菜单的链接时,它的项目将出现,当我点击它时它会消失在另一个链接(没有子菜单) 但我的问题是:当我点击一个包含子菜单的链接时,之前链接的子菜单将不会消失。所以最后所有链接都会保持打开状态(显示他们的子菜单)只需单击一个链接就可以了将消失。

$(document).ready(function() {
$('#right-menu > ul li').click(function(event) {
    if($(this).find('ul ').hasClass('active'))
    {
        $(this).find('ul').removeClass('active').slideUp('400');
    }else{
        $(this).find('ul').addClass('active').slideDown('400');
    }
});
});

2 个答案:

答案 0 :(得分:0)

更改您的逻辑,以便检查点击的元素是否处于活动状态。然后向上滑动任何同时处于活动状态的ul标记。最后,只有在点击的元素未处于活动状态时才向下滑动。

类似的东西:

$(document).ready(function() {
    $('#right-menu > ul li').click(function(event) {
        var activeStart = false;

        if($(this).find('ul').hasClass('active'))
        {
            activeStart = true;
        }

        $('ul.active').removeClass('active').slideUp('400');

        if(!activeStart) {
            $(this).find('ul').addClass('active').slideDown('400');
        }
    });
});

答案 1 :(得分:0)

你的问题是。如果用户点击带有子链接的链接,则子链接必须向下滑动。当点击另一个链接时,活动子链接必须向上滑动,单击的子链接必须向下滑动。你可以试试这个。 将类<ul class='non-active'>添加到链接

    $(document).ready(function() {
$('#right-menu > ul li').click(function(event) {
   $('.non-active').slideUp('400');
$(this).find('ul').slideDown('400');
});
});