Jqueryhover与单击可扩展菜单

客户端有一个Magento内置的站点，并且有一些javascript控制菜单的显示方式：

 jQuery('.nav-add li.level0, .nav li').hover( function(){ jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){ }); }, function(){ jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){ jQuery(this).removeClass('inSlide'); }); } ) jQuery('.nav-widget').hide();  

现在，只要用户在项目上hover，它就会被扩展，但尝试以这种方式导航是相当烦人的。 是否可以修改此代码，以便在用户单击某个项目时进行扩展？

我尝试用.click或.mouseup替换.hover无济于事。

Answer 1

假设您只想通过click而不是hover来切换hover行为，您可以尝试这样的事情。

 jQuery('.nav-add li.level0, .nav li').click(function(){ if(!$(this).data('clicked')){ jQuery(this) .data('clicked', true) .children('.nav-widget:not(.inSlide), ul:not(.inSlide)') .addClass('inSlide') .slideToggle(700,function(){ }); } else{ jQuery(this) .data('clicked', false) .children('.nav-widget, ul:not(.active)') .delay('2000') .slideUp(500,function(){ jQuery(this).removeClass('inSlide'); }); } }); jQuery('.nav-widget').hide(); 

Answer 2

简单地用.click（）替换.hover（）不起作用的原因是因为hover事件需要两个函数，一个用于onhover一个用于offhover。 .click（）事件只需要一个函数。 我假设你想要top函数作为你的点击事件。

 jQuery('.nav-add li.level0, .nav li').click( function(){ jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){ }); }