使用jquery在菜单中动态切换

Question

嗨，我需要帮助在菜单中添加动态切换，因为我在代码中显示了我为每个人做的，当我添加一个新的菜单时，我需要再次编写代码来使它切换，有人可以帮助我吗？

这是我的jquery

jQuery("li#menu-item-1826 > a").after("<span  class='spy-toggle'>+</span>");
 jQuery("li#menu-item-1867 > a").after("<span  class='spy-toggle'>+</span>");
 jQuery("li#menu-item-345 > a").after("<span  class='spy-toggle'>+</span>");
 jQuery("li#menu-item-349 > a").after("<span  class='spy-toggle'>+</span>");
 jQuery("li#menu-item-2029 > a").after("<span  class='spy-toggle'>+</span>");
 jQuery("li#menu-item-2595 > a").after("<span  class='spy-toggle'>+</span>");

    jQuery(".spy-toggle").click(function(){
    jQuery(this).parent().children(".sub-menu").toggle();
    jQuery(this).text( jQuery(this).text() == '+' ? "-" : "+");
});

Answer 1

您可以使用jQuery的‘on’事件处理程序来处理单击事件。这意味着即使对于动态添加到DOM的元素，也会触发该事件。更多信息here。

jQuery(document).on('click', '.spy-toggle', function() {
  jQuery(this).parent().children(".sub-menu").toggle();
  jQuery(this).text( jQuery(this).text() == '+' ? "-" : "+");
});