当窗口从移动设备更改为桌面时添加调整大小事件

Question

大家！

我只是想知道是否有人可以向我介绍如何在以下代码中添加调整大小事件：

    /* Your code goes here */ 

var $ = jQuery,
breakpoint = 940,
initClass = 'toggleSubnavInitiated',
menu,
parentLinks,
childrenItems;

$(document).ready(function() {
menu = $('.menu');
parentLinks = menu.find('.menu-item-has-children > a');
childrenItems = menu.find('.sub-menu');

if ($(window).width() <= breakpoint) {
    toggleSubnav(menu, parentLinks, childrenItems);
}
});

$(window).resize(function() {

if ($(window).width() <= breakpoint) {
    toggleSubnav(menu, parentLinks, childrenItems);
}
});

function toggleSubnav(menu, parentLinks, childrenItems) {

if (parentLinks.length !== 0) {
    menu.addClass(initClass);
    childrenItems.hide();

    parentLinks.on('click', function(event) {
        event.preventDefault();

        $(this).siblings('.sub-menu').toggle();
    });
}
}

在这段代码中似乎有一个，但是当浏览器从移动站点切换到桌面站点时，它似乎没有调整大小。在 Chrome 上，我能够获得 941 像素作为从移动设备切换到桌面设备的断点。我猜这个脚本中包含的 940 像素是从桌面到移动的吗？桌面到移动似乎运行正常。当窗口以 941 像素从移动设备变为桌面时，任何人对如何添加调整大小事件有任何想法？

谢谢大家的帮助！

附：我刚加入这里，所以请放轻松！ ;)

Answer 1

当您从高于 940 像素的值变为低于 940 像素时，您的 resize() 事件已正确设置。但是，您还没有定义任何相反的行为。你可以这样修改你的代码：

/* your previous code */
$(window).resize(function() {

    if ($(window).width() <= breakpoint) {
        toggleSubnav(menu, parentLinks, childrenItems);
    } else {
        $(this).siblings('.sub-menu').toggle(); //I assume you want the menu to disappear when moving back to a wider screen
    }
});

我也会小心使用toggle() 方法，因为每次调用它时，它都会显示或隐藏您的菜单。所以想象一下用户第一次在 940px 下调整大小，菜单会按照你的计划显示。如果他将大小调整得更低，您的菜单将再次消失。