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

Add resize event when window changes from mobile to desktop

本文关键字：桌面 调整 小事件 大小事 窗口 移动 添加      更新时间：2023-09-26

大家！

我只是想知道是否有人能够填写我如何向以下代码添加调整大小事件： 

    /* 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 像素从移动设备变为桌面时添加调整大小事件有任何想法吗？

谢谢大家的帮助！

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

当您从高于 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 以下调整大小，菜单将按您的计划显示。如果他调整得更低，您的菜单将再次消失。

相关文章：