0

我有一个 div，它在悬停或单击时显示菜单，具体取决于浏览器宽度。

onhover 或 onclick 以更大的分辨率，菜单应悬停在现有内容上。

onclick 在较小的分辨率下，菜单不应悬停而是向下滑动。

最初加载到特定屏幕宽度时，一切都按预期工作。

手动调整浏览器屏幕大小时会出现此问题。如果它的分辨率更高并且菜单按钮悬停在上面，则显示菜单 - 一切都很好。但是，如果屏幕随后手动调整为更小的宽度，而不是菜单滑动 onclick，它会在悬停时悬停在现有内容上（尽管可以作为滑块 onclick 正常工作）。

如果我然后刷新窗口，它会像滑块一样工作。

我猜当屏幕调整大小时，浏览器并没有取消悬停事件，即使我正在检查悬停时的宽度以及 onclick 和根据它确定的操作。我究竟做错了什么？

这是我的代码： - #MainMenu 是被点击的按钮，.nav-container 是导航 div

        $('#MainMenu').on('click mouseover',function(event){

                    var wi = $(window).width();

                    //If between 768 and 979 pixels, menu should be overlay/onhover/onclick

                    if(wi >= 768 && wi <=979) {

                        /* Show menu on hover */

                        $("#MainMenu, .nav-container").hover(function() {
                            $('.nav-container').show();
                        });

                        /* Hide menu on mouseout */

                        $('.header-content').mouseleave(function() {
                            $('.nav-container').hide();
                        });

                        /* Nav should also open/close onclick */
                        $('.nav-container').toggle();

                    }

                    //Otherwise, menu should slide down but only onclick

                    else {
                        if(event.type=="click") {
                            $('.nav-container').slideToggle();
                        }   

            });
4

1 回答 1

0

像这样的东西怎么样：

$('#MainMenu').on('click mouseover',function(event){
        /*  Show menu on hover */
        $("#MainMenu, .nav-container").hover(function() {

            var wi = $(window).width();

            //If between 768 and 979 pixels, menu should be overlay/onhover/onclick
            if(wi >= 768 && wi <=979) {
                $('.nav-container').show();
            }
            else{ //Otherwise, menu should slide down but only onclick
                if(event.type=="click") {
                    $('.nav-container').slideToggle();
                }   
            }
        });
    }
});

基本上，您在触发显示和隐藏之前检查宽度。

旁注：您的hover事件对 each 具有约束力click mouseover，这可能不是您想要的。

于 2013-09-04T15:25:20.600 回答