你好我有一个菜单。我想为每个父级菜单添加一个toogle动画。但目前我卡住了，因为当我点击父菜单。所有父母菜单显示他们的子菜单。我想我需要一个jQuery的每个功能，但我不知道如何执行我的情况。继承人我的代码jquery每个功能的菜单

$(".menu-item-has-children").prepend("<i></i>"); 
$(".menu-item-has-children").find("i").addClass("fa fa-plus-circle toogle-icon"); 
$(".toogle-icon").click(function(){ 
    $(".sub-menu").slideToggle(); 
});

继承人的jsfiddle https://jsfiddle.net/Lypj8tov/1/

来源

2016-09-28 antonscie

尝试：

$(".toogle-icon").click(function(){ 
    $(this).parent('.menu-item-has-children').find(".sub-menu").slideToggle(); 
});

你也可以简化整个事情：

$('<i class="fa fa-plus-circle toogle-icon"></i>') 
    .click(function(){ 
    $(this).parent().find(".sub-menu").slideToggle(); 
    }) 
    .prependTo(".menu-item-has-children");

检查https://fiddle.jshell.net/ermakovnikolay/q5z4b64u/

来源

2016-09-28 14:43:47

$(".toogle-icon").click(function(){ 
    $(this).closest('.menu-item-has-children').find(".sub-menu").slideToggle(); 
});

@Nikolay Ermakov谢谢你，你为什么删除你的答案？它有一个错误？

来源

2016-09-28 14:46:53 antonscie

我回来）） –

生病标记您的文章作为回答花花公子 – antonscie

谢谢，伙计。检查一下改进。 –

您需要将相关元素引用到单击的实例。使用this：

$(".toogle-icon").click(function(){ 
    $(this).siblings('.sub-menu').slideToggle(); 
});

Fiddle Demo

来源

2016-09-28 14:46:54 DaniP

解决方案：

$(".toogle-icon").click(function(){ 
    $(this).parent().find(".sub-menu").slideToggle(); 
});

来源

2016-09-28 14:47:26

jquery每个功能的菜单

回答

Fiddle Demo

相关问题