我有响应方面的菜单。此菜单有一个子菜单,如:
.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();
});
答案 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();
});
这是最基本的工作下拉菜单,当然可以通过许多其他内容扩展它。例如。示例小提琴还有一个额外的检查,如果已经显示了被点击的元素,如果是这种情况则切换它。但是这个基本代码应该给你一个充分的起点。