在鼠标移开时保持子菜单打开 [英] Keep submenu open on mouse out

问题描述

我正在使用的导航菜单具有默认的CSS行为(适用于那些禁用了JavaScript的罕见人士).默认情况下，不显示子菜单:

A navigation menu I'm working on has a default CSS behavior (for those rare people who have JavaScript disabled). By default, the submenu is not displayed:

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

悬停时，子菜单显示出来:

On hover, the submenu is revealed:

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

对于大多数精通JavaScript的人来说，菜单包含以下jQuery代码段:

For the JavaScript-minded majority, the menu is juiced up with the following jQuery snippet:

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

});

此切换效果很好，除了它仅在鼠标光标停留在父链接上方时才有效.如果打开了子菜单，并且用户碰巧将鼠标从父链接上移开，则子菜单会关闭.

This toggling works great, except it only works as long as the mouse cursor stays over the parent link. If the submenu is open, and the user happens to move the mouse away from the parent link, the submenu snaps shut.

问题::如果子菜单已经打开，如何在鼠标移开时将其打开?

Question: How do I keep the submenu open on mouse out, if it's been already open?

我尝试将类似这样的内容添加到我的jQuery代码段中:

I tried adding something like this to my jQuery snippet:

$('.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');
}
});

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

Not only it's mediocre coding, but it also actually doesn't work. ;-(

我应该如何解决此问题?

How should I fix this issue?

提前感谢您的建议！

推荐答案

我不确定(单击它的)点击问题，但是您不需要JavaScript来禁用" CSS.只需使用< noscript> 标记，就像这样:

i'm not sure the click issue yet (looking at it), but you don't need JavaScript to "disable" the CSS. Simply use <noscript> tags, like so:

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

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

Or you could simply add a no-js class to you main menu element, then remove that class if JS is enabled at the very start of your JavaScript. Then write your "no-js css" to use .no-js + whatever children instead of the main class.

问题很简单，当您使用 mouseover 取消非js" css时，每次用户将鼠标悬停在该子菜单上时，菜单仍处于隐藏状态.换句话说，您不仅要删除"no js" css，还要将其隐藏在 .main-navigation ul li ！

The problem is simple, when you use mouseover to cancel your "non-js" css, the menu is still being hidden everytime the user hovers over that submenu. In other words, you're not just removing the "no js" css, you're hiding it on every mouseover of .main-navigation ul li!

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

Simply follow something in my first suggestion, then remove the mouseover function completely and viola! problem solved!

我用您的代码编写了一个jsFiddle，展示了如何实现它.

I wrote a jsFiddle using your code to show how I might approach it.

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替换为以下内容:

1. Where you have manual script at between <script type="text/javascript"> tags, just before that noscript tage you threw in(which you can remove), replace all your JS with the following:

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

删除 NOSCRIPT 标记

在您的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;  
}

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

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

这篇关于在鼠标移开时保持子菜单打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！