使用jQuery .on（）创建一个下拉菜单

我正在尝试创建一个jQuery下拉菜单，它会添加一个类来了解它是否向下或向上。 但由于某种原因，.on（）函数似乎没有响应点击。 我做错了什么？

这是我的HTML：

 
 Item 1 
 
 Item 2 
 
 Sub Item 1 
 
 Sub Item 2 
 
 Sub Item 3 
 
 
 
 Item 3 
  

我的JS：

 // Slide down jQuery('#main-menu > li.drop-down > a').not('.active a').click(function(e){ e.preventDefault(); jQuery(this).closest('li.drop-down').addClass('active').find('ul.sub-menu').slideDown(); }); // Slide up jQuery('#main-menu > li.drop-down.active > a').on('click', function(e){ e.preventDefault(); jQuery(this).closest('li.drop-down').find('ul.sub-menu').slideUp(400, function(){ jQuery(this).closest('li.drop-down.active').removeClass('active'); }); }); 

谢谢！

Answer 1

您不需要2个处理程序来实现您的目标。

您可以使用一个使用toggleClass和slideToggle jQuery方法的处理程序。

 // Slide down jQuery('#main-menu').on('click', 'li.drop-down > a', function(e){ e.preventDefault(); jQuery(this) .closest('li.drop-down') .toggleClass('active') .find('ul.sub-menu') .slideToggle(400, function(){ if($(this).is(':hidden')){ jQuery(this).closest('li.drop-down.active').removeClass('active'); } }); }); 

参考文献： .toggleClass（） ,. slideToggle（）

Answer 2

为什么不使用Superfish插件？