调整大小后,JS 侧边栏菜单动画在随机分辨率下不起作用 screen/window
JS sidebar menu animation doesn't work at random resolutions after resizing screen/window
我正在测试侧边栏菜单类别在调整大小后不以随机分辨率显示项目的应用程序 window/screen。
例如:
点击 1440px 的类别后,它不显示项目,然后我调整到 1250px,它显示项目,然后我调整到 900px,再回到 1440px,点击后它确实显示项目,但是它不显示 1250 像素。
我有三个媒体查询:< 768、>= 768 和 <= 1200,以及 < 1200
我的部分 js 如下所示:
var sidebarItemClick = function(e) {
$(this).parent().find('.subnav').toggleClass("subnav--active");
$(this).find('.sidebar__arrow').toggleClass("sidebar__arrow--rotate");
};
if ($(window).width() < 768 || $(window).width() > 1200) {
$(".sidebar__item--has-sub a").bind("click", sidebarItemClick);
}
我找到了答案。
调整大小后 window 函数将继续绑定 sidebarItemClick 函数,但不会在 运行 后解除绑定。
因此,每次 window 调整大小都会增加绑定函数的数量,使其无法正常工作。
添加解除绑定解决了问题。
我正在测试侧边栏菜单类别在调整大小后不以随机分辨率显示项目的应用程序 window/screen。
例如:
点击 1440px 的类别后,它不显示项目,然后我调整到 1250px,它显示项目,然后我调整到 900px,再回到 1440px,点击后它确实显示项目,但是它不显示 1250 像素。
我有三个媒体查询:< 768、>= 768 和 <= 1200,以及 < 1200
我的部分 js 如下所示:
var sidebarItemClick = function(e) {
$(this).parent().find('.subnav').toggleClass("subnav--active");
$(this).find('.sidebar__arrow').toggleClass("sidebar__arrow--rotate");
};
if ($(window).width() < 768 || $(window).width() > 1200) {
$(".sidebar__item--has-sub a").bind("click", sidebarItemClick);
}
我找到了答案。 调整大小后 window 函数将继续绑定 sidebarItemClick 函数,但不会在 运行 后解除绑定。 因此,每次 window 调整大小都会增加绑定函数的数量,使其无法正常工作。
添加解除绑定解决了问题。