JS-窗口宽度函数不起作用

JS - Window width function not working

本文关键字：函数 不起作用 窗口 JS-      更新时间：2023-09-26

所以我有一个响应导航菜单。按钮用于切换菜单的输入和输出。这很好用。

我添加了一个例外，如果窗口超过一定宽度，菜单将关闭，但这根本不起作用。我找不到这个代码有什么问题。

JS:

$(document).ready(function(){
    $(".menubutton").click(function(){
        $(".respmenu-gen").toggleClass("respmenu-opn respmenu-cls");
    });
    if ($(window).width() > 767) {
        $(".respmenu-gen").removeClass("respmenu-opn").addClass("respmenu-cls")
    };
});

jsfiddle：https://jsfiddle.net/76amgsb8/

谢谢！

您应该使用window.resize()方法。在这里查看。

您在这里主要做的是，当内容加载时，只检查窗口的宽度一次。您应该绑定到resize事件。

因此，您基本上可以执行以下操作：

$( window ).resize(function() {
  var viewportWidth = $(window).width();
  if (viewportWidth > 767)
      $(".respmenu-gen").removeClass("respmenu-opn").addClass("respmenu-cls")
});
$(document).ready(function(){
    $(".menubutton").click(function(){
        $(".respmenu-gen").toggleClass("respmenu-opn respmenu-cls");
    });
});

如果您必须使用JavaScript来处理响应性，我建议使用window.matchMedia(mediaQueryString)的方式，因为依赖jQuery resize()不会给您带来确切的结果。window.matchMedia()更强大，您还可以从熟悉的CSS3媒体查询中获益。https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

更新

不过，应该始终依赖CSS3媒体查询，而不是JavaScript（除非你想通过CSS实现一些不可能的东西，唯一的解决方法是JavaScript）。

使用以下代码：

 var window_width = $(window).width();
if (window_width < 767) {
    $(".respmenu-gen").removeClass("respmenu-opn").addClass("respmenu-cls");
}
相关文章：