Question

大家好！

我只是想知道是否有人可以填写如何将resize事件添加到以下代码：

    /* 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像素从移动设备移动到桌面时，任何人都有关于如何添加调整大小事件的任何想法？

谢谢大家，感谢您的帮助！

P.S。我刚加入这里，所以请放轻松，拜托！ ;）

Answer 1

当您从高于940px的值变为低于一个值时，您的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下第一次调整大小，菜单将按照您的计划显示。如果他调整得更低，你的菜单会再次消失。

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

1 个答案: