Javascript 隐藏li的子项并单击显示

我这边有菜单。此菜单有一个子菜单，如：

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

---

你的代码看起来太复杂了。尝试简单的方法

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

#nav li > ul {
    display:none;
}

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

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

---

粘贴html标记我强烈建议您将id设置为要显示/隐藏的ul，添加样式display:none，并创建onClick函数将display设置为true是否删除span，然后在其上切换类？您还可以检查ul是否有类，但没有它的名称？如果您使用

.remove（）

您的元素在从dom中删除后将无法显示。但是，真的请包括你的html。@RohanKumar为什么这么复杂？

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

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