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

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

$(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")
            });
        });
    }
});

有什么想念的想法吗？提前致谢！

最佳答案

如果屏幕很小，则需要删除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")
            });
        });
    }
});

关于javascript - 如何获得mouseover/mouseout来调整大小？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52117821/