javascript – 鼠标停止时保持子菜单打开

2023年3月15日 178次阅读

我正在处理的导航菜单有一个默认的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');
}
});

它不仅是平庸的编码,而且实际上也不起作用. ;-(

我该如何解决这个问题？

提前感谢您的建议！

最佳答案 我还不确定点击问题(看着它),但你不需要JavaScript来“禁用”CSS.只需使用< noscript>标签,像这样：

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

或者你可以简单地在你的主菜单元素中添加一个no-js类,然后在你的JavaScript一开始就启用JS时删除该类.然后编写你的“no-js css”来使用.no-js无论是什么孩子而不是主类.

UPDATE

问题很简单,当你使用鼠标悬停取消你的“非js”css时,每当用户将鼠标悬停在该子菜单上时,菜单仍然被隐藏.换句话说,你不只是删除“no js”css,你将它隐藏在.main-navigation ul li的每个鼠标悬停中！

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

我用你的代码编写了一个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");
    });
})

一步步

>在< script type =“text / javascript”>之间有手动脚本的地方标签,就在您投入的noscript tage之前(您可以删除),用以下内容替换所有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>

>删除NOSCRIPT TAGS
>在您的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">
点赞