javascript - jquery 菜单的每个功能

Question

大家好，我有一份菜单。我想为每个父菜单添加一个 toogle 动画。但目前我卡住了，因为当我点击父菜单时。所有父菜单显示他们的子菜单。我想我每个函数都需要一个 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/

Answer 1

尝试:

$(".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/