Jquery菜单 – 更改为鼠标hover

我不太使用JQuery，在这种情况下，它是通过菜单生成器创建的菜单，我的问题是我正在尝试将其从ONCLICK触发器更改为mouseover / mouseout函数。 我没有发布我尝试的所有变体，因为它很多而且大多数都没有function，我确实在JQuery中使用MOUSEOVER和MOUSEOUT得到了一个function版本代码，但它导致了这种奇怪的弹跳效果，菜单会扩展/即使在初始鼠标hover发生后没有鼠标移入/退出菜单，也会关闭/展开/关闭/展开。 如果有人可以查看我编辑的最后一个代码，并建议我接近它的错误和正确的代码我会很感激。

这是原始的JQuery代码：

( function( $ ) { $( document ).ready(function() { $('#cssmenu li.has-sub>a').on('click', function(){ $(this).removeAttr('href'); var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(); } else { element.addClass('open'); element.children('ul').slideDown(); element.siblings('li').children('ul').slideUp(); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(); } }); }); } )( jQuery ); 

这是HTML：

 
 
 
Home
 
OUR SERVICES A 
 
SERVICE 1
 
SERVICE 2
 
SERVICE 3
 
SERVICE 4
 
 
 
OUR SERVICES B 
 
SERVICE 1 
 
SUB SERVICE 1
 
SUB SERVICE 2
 
 
 
SERVICE 2 
 
SUB SERVICE 1
 
SUB SERVICE 2
 
 
 
 
 
About Us
 
Contact Us
 
  

这是我最后一个版本，但我在以下方面取得了巨大的成功：

 ( function( $ ) { $( document ).ready(function() { $('#cssmenu li.has-sub>a').on('mouseover', function(){ $(this).removeAttr('href'); var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(); } else { element.addClass('open'); element.children('ul').slideDown(); element.siblings('li').children('ul').slideUp(); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(); } }); $('#cssmenu li.has-sub>a').on('mouseout', function(){ $(this).removeAttr('href'); var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(); } else { element.addClass('open'); element.children('ul').slideDown(); element.siblings('li').children('ul').slideUp(); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(); } }); }); } )( jQuery ); 

我只是试图让“扩展”发生ONMOUSEOVER并在ONMOUSEOUT上发生“崩溃”。 在此先感谢您的帮助。

Answer 1

希望这可以帮助

已修改您编写的jquery以执行菜单的滑动

 $(document).ready(function () { $("#cssmenu li.has-sub a").on('mouseenter', function () { //this line finds the 'ul' which is inside the 'li' which has the class //'has-sub',then slidedown the 'ul' and add a class check to it $(this).next('ul').slideDown().addClass('check'); }); $("#cssmenu li.has-sub ul").on('mouseleave', function () { //when mouseleave the 'ul' check if the 'ul' has class 'check', then 'slideup' //the that 'ul' and remove the class check; if ($(this).hasClass('check')) { $(this).slideUp().removeClass('check'); } }); }); 

CSS

 #cssmenu { width:250px; } #cssmenu ul ul { display: none; } #cssmenu li.active ul { display: block; } 

我更喜欢使用mouseleave和mouseenter，然后使用mouseover和mouseout。 查看此网站了解更多详情。

这是工作小提琴