Question

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

这是原始的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：

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

这是我在上一个版本中有限但又奇特成功的版本：

( 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 );

我只是试图让＃34;扩展＆＃34;发生ONMOUSEOVER和＆＃34;崩溃＆＃34;发生在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。有关详细信息，请查看此website。

这是工作fiddle

Jquery菜单 - 更改为鼠标悬停

1 个答案: