Javascript JS-窗口宽度函数不工作

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

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

JS:

jsfiddle：

谢谢大家!

使用以下代码：

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

var window_width=$（window.width（）；
如果（窗宽<767）{
$（“.respmenu gen”）.removeClass（“respmenu opn”）.addClass（“respmenu cls”）；
}

您应该使用

window.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处理响应性问题，我建议您使用
窗口。matchMedia（mediaQueryString）
方式，因为依赖jQuery
resize（）
不会给出准确的结果
window.matchMedia（）
功能更强大，您还可以从熟悉的CSS3媒体查询中获益。

更新

但是应该始终依赖CSS3媒体查询，而不是JavaScript（除非您希望通过CSS实现一些不可能实现的功能，唯一的解决方法是JavaScript）。
您有视口元标记吗？如果是这样，它会说什么？是的：你只关心页面加载时发生的行为吗？在文档准备代码中输入一些警报，检查它是否真的到达了那里（或console.log（）），并且（在Firefox中）使用Ctrl+Shift+J查看错误日志。它将向您显示Javascript的其他部分是否正在停止工作。@lomteslie并不特别。看起来很有希望……但遗憾的是，没有成功地在JSFIDLE或codepen中插入完整代码以获得更好的帮助啊哈！是的，很好。resize（）成功了！想不到……以matchMedia（）的方式调查。看起来很强大！肯定会在将来的项目中使用此加载在初始页面加载上吗？这也可以通过css媒体查询完成，例如，使用它将css设置为.resp菜单opn。当你不改变类时，当你提高/降低窗口宽度时，一个“打开”菜单将关闭/重新打开：当然这可以通过CSS媒体查询来完成，OP的问题是关于JavaScriptit，尽管它是用CSS标记的。。。但我应该把评论放在问题下面
$( 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");
    });
});