-1

我在响应方面有一个菜单。此菜单有一个子菜单，例如：

.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();
});
4

1 回答 1

1

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

用 CSS 隐藏开头的所有子菜单：

#nav li > ul {
    display:none;
}

然后切换一个指示显示元素的类（并且可能使用一些动画）：

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

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

这是最基本的工作下拉菜单，当然可以用很多额外的东西来扩展它。例如，示例小提琴有一个额外的检查，如果单击的元素已经显示，如果是这样，则切换它。但是这个基本代码应该给你一个足够的起点。

演示

于 2013-10-22T10:44:23.010 回答