javascript - 如何让鼠标悬停/鼠标移开来调整大小？

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 问题中找到)