4

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

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

我应该如何解决这个问题？

提前感谢您的建议！

4

2 回答 2

1

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

mouseleave JavaScript 事件是 Internet Explorer 专有的。由于事件的通用性，jQuery 模拟了这个事件，因此无论浏览器如何都可以使用它。当鼠标指针离开元素时，该事件被发送到元素。任何 HTML 元素都可以接收此事件。

mouseover - 当有人将鼠标悬停在“父”ul li 上时，您想显示任何子 ul

click - 当有人点击你想要隐藏或显示任何子 ul 的父 ul li

mouseleave - IE 特定于 jquery 使浏览器对你来说是不可知的。

使用标签将菜单保持在工作状态<noscript>，如果 JavaScript 可用，则打算从那里开始。

小提琴 - 这个小提琴只是为了给你一个开始，因为我没有放入你的任何 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);
});
于 2013-05-21T17:53:42.100 回答
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！

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

我用你的代码写了一个 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">那个标签之前（你可以删除它），用以下内容替换你的所有 JS：noscript

    <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">
于 2013-05-21T17:32:05.413 回答