Question

因此，我正在使用一个下拉菜单，该菜单在移动设备和台式机上均可使用，但是我在调整大小时遇到了问题。当我调整大小时，直到移动，鼠标悬停和鼠标移出仍然有效。

$(window).on("load resize", function(){
    var width = $(window).width();
        if ($(this).width() < 1023){
            if($(".nav-more").length == 0){
                $(".menu-item-has-children > a").append('<div class="nav-more">+</div>');
            };
        $(".nav-more").on("click", function(e){
            e.preventDefault();
            var cssDisplay = $(this).parent().parent().find('.sub-menu').css("display");
            if (cssDisplay == 'none'){
                $(this).parent().parent().find('.sub-menu').css("display", "contents");
            }
            else{
                $(this).parent().parent().find('.sub-menu').css("display", "none")  
            }

        });
    } else if($(this).width() > 1023){
            $(".menu li").mouseover(function(){
                $(this).find('.sub-menu').css("display", "block");
            $(".menu li").mouseout(function(){
                $(this).find('.sub-menu').css("display", "none")
            });
        });
    }
});

对我错过的任何想法吗？在此先感谢！

Answer 1

移动设备没有“鼠标”，因此它们永远不会触发“鼠标悬停”，我想您的问题仅发生在使用chrome开发人员工具之类的开发中……如果是这种情况，则是由Chrome DevTools的错误引起的。

您可能会了解有关the bug here的更多信息。

作为一种变通办法，您可以添加以下内容来验证您是否通过检测触摸事件来模拟移动设备：

        if ('TouchEvent' in window && 'ontouchstart' in window) {
            $(".menu li").mouseover(function(){
                $(this).find('.sub-menu').css("display", "block");
            $(".menu li").mouseout(function(){
                $(this).find('.sub-menu').css("display", "none")
           });
        }

（在this问题中找到了最后一部分）

Answer 2

在屏幕尺寸较小的情况下，您需要删除mouseover / mouseout事件处理程序：

$(window).on("load resize", function(){
    var width = $(window).width();
    if ($(this).width() < 1023){

        $(".menu li").off('mouseover');
        $(".menu li").off('mouseout');

        if($(".nav-more").length == 0){
            $(".menu-item-has-children > a").append('<div class="nav-more">+</div>');
        };

        $(".nav-more").on("click", function(e){
            e.preventDefault();
            var cssDisplay = $(this).parent().parent().find('.sub-menu').css("display");
            if (cssDisplay == 'none'){
                $(this).parent().parent().find('.sub-menu').css("display", "contents");
            }
            else{
                $(this).parent().parent().find('.sub-menu').css("display", "none")  
            }

        });
    } else if($(this).width() > 1023){
            $(".menu li").mouseover(function(){
                $(this).find('.sub-menu').css("display", "block");
            $(".menu li").mouseout(function(){
                $(this).find('.sub-menu').css("display", "none")
            });
        });
    }
});

如何获得mouseover / mouseout来调整大小？

2 个答案: