通过点击隐藏li的孩子并显示

时间:2013-10-22 10:21:57

标签: javascript jquery html css

我有响应方面的菜单。此菜单有一个子菜单,如:

.navbar ul li ul 

我想如果父菜单有像我的代码一样的子菜单我要隐藏它,当我需要显示它时,单击父菜单来显示它。

我尝试了这段代码,但它不起作用。

$(".navbar ul li").each(function(index, element) {
    if ($(this).children('ul').attr('class')){
    }
    else {
        $(this).find('span').remove();
    }
});

$(".navbar ul li span").click(function(){
    $(this).toggleClass('ss');
    $(this).parent('li').toggleClass('active-mobile');
    $(this).parent('li').children('ul').slideToggle();
});

1 个答案:

答案 0 :(得分:1)

您的代码看起来过于复杂。尝试简单的方法。

使用CSS隐藏所有子菜单:

#nav li > ul {
    display:none;
}

然后切换一个指示所显示元素的类(并且可能使用一些动画):

$('ul#nav > li').click(function () {

    $(".show").removeClass("show").find("ul").slideUp();
    $(this).addClass("show").find("ul").slideDown();    
});

这是最基本的工作下拉菜单,当然可以通过许多其他内容扩展它。例如。示例小提琴还有一个额外的检查,如果已经显示了被点击的元素,如果是这种情况则切换它。但是这个基本代码应该给你一个充分的起点。

Demo