jquery jede Funktion für Menü

Question

Hallo Leute, ich habe ein Menü. Ich möchte jedem übergeordneten Menü eine Toogle-Animation hinzufügen. aber momentan steckte ich fest, weil wenn ich auf das Elternmenü klicke. Alle übergeordneten Menüs zeigen ihr untergeordnetes Menü an. ich denke, ich brauche eine jquery jede Funktion, aber ich weiß nicht, wie mit meinem Fall zu implementieren. herer mein Code

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

herer jsfiddle https://jsfiddle.net/Lypj8tov/1/

Answer 1

Versuchen:

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

Auch Sie können das Ganze vereinfachen:

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

prüfen https://fiddle.jshell.net/ermakovnikolay/q5z4b64u/

Answer 2

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

@Nikolay Ermakov danke Mann, warum löschen Sie Ihre Antwort? Ist es ein Fehler?

Answer 3

Sie müssen das relative Element auf die angeklickte Instanz verweisen. Mit this:

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

Fiddle Demo

Answer 4

Lösung:

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