jQuery菜单-更改为鼠标悬停 [英] Jquery Menu - change to mouseover

问题描述

我使用JQuery的次数不多，在这种情况下，它是通过菜单构建器创建的菜单，我的问题是我试图将其从ONCLICK触发器更改为mouseover/mouseout函数.我没有发布我尝试过的所有变体，因为它很多并且大多数都没有功能，我确实在JQuery中使用MOUSEOVER和MOUSEOUT得到了功能版本代码，但是它导致了这种奇怪的弹跳效果，菜单将展开/即使在最初的鼠标悬停发生后没有鼠标移入/移出菜单的情况下，也要关闭/展开/关闭/展开.如果有人可以看一下我编辑的最后一个代码，并建议我在哪里出错，以及我将不胜感激的正确代码.

I don't use JQuery much and in this case it is a menu created through a menu builder, my problem is i'm trying to change it from an ONCLICK trigger to a mouseover/mouseout function. I'm not posting all the variations I've tried because its a lot and most were non functional, I did get a functional version code using MOUSEOVER AND MOUSEOUT in the JQuery but it resulted in this strange bouncing effect where the menu would expand/close/expand/close/expand even though there was no mouse movement in/out of the menu after the initial mouseover occurred. IF someone can look at the last code I edited and advise where I'm approaching it wrong and the correct code I would appreciate it.

这是原始的JQuery代码:

Here is the original JQuery code:

( 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:

<div id="cssmenu">
<ul>
   <li class="active"><a href="index.html"><span>Home</span></a></li>
   <li class="has-sub"><a href="#"><span>OUR SERVICES A</span></a>
      <ul>
         <li><a href="service1.html" class="cold"><span>SERVICE 1</span></a></li>
         <li><a href="service2.html" class="hot"><span>SERVICE 2</span></a></li>
         <li><a href="#" class="clean"><span>SERVICE 3</span></a></li>
         <li class="last"><a href="#" class="icy"><span>SERVICE 4</span></a></li>
      </ul>
   </li>
   <li class="has-sub"><a href="#"><span>OUR SERVICES B</span></a>
      <ul>
         <li class="has-sub"><a href="#"><span>SERVICE 1</span></a>
            <ul>
               <li><a href="#"><span>SUB SERVICE 1</span></a></li>
               <li class="last"><a href="#"><span>SUB SERVICE 2</span></a></li>
            </ul>
         </li>
         <li class="has-sub"><a href="#"><span>SERVICE 2</span></a>
            <ul>
               <li><a href="#"><span>SUB SERVICE 1</span></a></li>
               <li class="last"><a href="#"><span>SUB SERVICE 2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href="#"><span>About Us</span></a></li>
   <li class="last"><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>

这是我在以下位置获得的有限但怪异的成功的最新版本:

Here is the last version I had limited but quirky success at:

( 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上.感谢您的任何事先帮助.

I'm just trying to get the "expand" to occur ONMOUSEOVER and the "collapse" to occur on ONMOUSEOUT. Thanks for any help in advance.

推荐答案

希望这会有所帮助

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

have modified the jquery you have written to perform the sliding of the menu's

$(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.有关更多信息，请参见网站详细信息.

i prefer using mouseleave and mouseenter, then mouseover and mouseout. Check this website for more details.

这是有效的小提琴

这篇关于jQuery菜单-更改为鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！