jsFiddle

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时，每次用户将鼠标悬停在该子菜单上时，菜单仍然会被隐藏。换句话说，你不只是删除了“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之前（可以删除），请使用以下内容替换所有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">
```

Answer 2

所以这里是IE做了一些整洁的事情，而jquery使它与浏览器无关，因此它可以使用。 mouseleave是IE中所选元素及其任何子元素的'mouseout'，jquery使其适用于其他浏览器。

mouseleave JavaScript事件是Internet Explorer专有的。由于事件的一般实用程序，jQuery模拟了这个事件无论浏览器如何都可以使用它。此事件发送给鼠标指针离开元素时的元素。任何HTML元素可以收到这个活动。

鼠标悬停 - 当有人将鼠标移到“父母”上时，你想要显示任何子标题

点击 - 当有人点击你要隐藏的父级别或显示任何子级

时

mouseleave - 特定于IE的jquery使浏览器不可知。

使用<noscript>标记将菜单保持在工作状态，并打算将javascript从那里开始（如果可用）。

fiddle - 这个小提琴只是为了给你一个开始，因为我没有把你的任何一个css。

$(function () {
    $("ul").on({"mouseover":function(event){
        $(this).find("ul").show("slow");
    }},"li.menu-item",null).on({"click":function(event){
        $(this).find("ul").toggle("slow");
    }},null,null).on({"mouseleave":function(event){
        $(this).find("ul").hide("slow");
    }},null,null);
});

鼠标移开时保持子菜单打开

2 个答案:

更新

jsFiddle

代码