javascript - 鼠标离开时保持子菜单打开

Question

我正在处理的导航菜单具有默认的 CSS 行为(对于那些极少数禁用 JavaScript 的人)。默认情况下，不显示子菜单:

.main-navigation ul ul {
display:none;
}

悬停时，显示子菜单:

.main-navigation ul li:hover > ul {
    display:block;  
}

对于大多数有 JavaScript 头脑的人来说，菜单是用下面的 jQuery 片段来丰富的:

jQuery(document).ready(function($) {

/* cancel the default CSS hover behavior */

 $('.main-navigation ul li').on('mouseover',function(){
        $('.main-navigation ul li:hover > ul').css('display', 'none');
    $(this).css('cursor', 'pointer');
     });

/* toggle submenu display (if the submenu actually exists) */

   $('.main-navigation ul li a').click(function() { 
    var li = $(this).closest('li'); 
    if(li.has('ul')) li.find('ul').slideToggle(100); 
});

});

这种切换效果很好，但它只在鼠标光标停留在父链接上时才起作用。如果子菜单打开，并且用户碰巧将鼠标从父链接上移开，则子菜单会突然关闭。

问题:如果子菜单已经打开，如何在鼠标移开时保持打开状态？

我试着在我的 jQuery 片段中添加类似这样的内容:

$('.main-navigation ul li').on('mouseout',function(){
    if ($('.main-navigation ul li ul').css('display') = 'none') {
    $('.main-navigation ul li ul').css('display', 'none');
} else if ($('.main-navigation ul li ul').css('display') = 'block') {
    $('.main-navigation ul li ul').css('display', 'block');
}
});

不仅编码平庸，而且实际上也行不通。 ;-(

我该如何解决这个问题？

提前感谢您的建议!

Answer 1

我还不确定点击问题(查看)，但您不需要 JavaScript 来“禁用”CSS。只需使用 <noscript>标签，像这样:

<noscript>
    <style type="text/css">
        .exampleclass:hover { display: block; }
    </style>
</noscript>

或者您可以简单地添加一个 no-js类给你的主菜单元素，如果在你的 JavaScript 的一开始就启用了 JS，则删除该类。然后编写你的“no-js css”来使用.no-js + 任何子类而不是主类。

更新

问题很简单，当你使用mouseover要取消您的“非 js”css，每次用户将鼠标悬停在该子菜单上时，菜单仍处于隐藏状态。换句话说，您不只是删除“无 js”css，而是在每次鼠标悬停 .main-navigation ul li 时隐藏它。 !

只需遵循我的第一个建议，然后完全删除鼠标悬停功能，viola!问题解决了!

我使用您的代码编写了一个 jsFiddle 来展示我可能如何处理它。

jsFiddle

代码

$(function() {
    //    See in css where i changed `.main-navigation ul li:hover > ul` to `.main-navigation.no-js ul li:hover > ul`
    //    See Also in HTML where i added class `no-js` to `#site-navigation`
    $(".no-js").removeClass("no-js");
    $('.main-navigation ul li a').on("click", function(e) {
        //    first hide sibling sub-menus!
        $(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
        //    no need for the if statement you had. 
        //    jQuery is "smart", if it doesn't exist, 
        //        then this function simply won't do anything!
        $(this).closest('li').find('ul').slideToggle(100); 
    })
    //    and just to add a little for ya, 
    //        the following will slideUp our submenu if user hovers away from MAIN MENU
    .closest("ul").on("mouseleave", function(e) {
        $(this).find("ul:visible").slideUp("slow");
    });
})

循序渐进

1. 在 <script type="text/javascript"> 之间有手动脚本的地方标签，就在那之前 noscript你扔进去的标签(你可以删除)，用以下内容替换你所有的 JS:

   <script type="text/javascript">
       jQuery(document).ready(function(jQuery) {
   
           jQuery(".no-js").removeClass("no-js");
           jQuery('.main-navigation ul li a').on("click", function(e) {
               $(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
               jQuery(this).closest('li').find('ul').slideToggle(100); 
           })
           //  If you find the menu hiding to fast, simply remove or comment out the next 3 lines
           jQuery('.main-navigation ul').on("mouseleave", function(e) {
               jQuery(this).find("ul:visible").slideUp("slow");
           });
   
       });
   </script>
   

2. 删除 NOSCRIPT标签

3. 在您的 CSS 代码中:

   /* Find the area that was written as */
   .main-navigation ul li:hover > ul {
       display:block;  
   }
   
   /* And replace it with the following */
   .main-navigation.no-js ul li:hover > ul {
       display:block;  
   }
   

4. 最后，查看您的 HTML，找到写成 <nav id="site-navigation" class="main-navigation" role="navigation"> 的行并将其替换为:

   <nav id="site-navigation" class="main-navigation no-js" role="navigation">