Question

所以我有一个响应式导航菜单。一个按钮用于切换菜单。这很好。

我添加了一个例外，如果窗口超过一定宽度，菜单会关闭，但这根本不起作用。我找不到这段代码的错误。

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/

谢谢！

Answer 1

您应该使用window.resize()方法。请查看here。

这里你基本上做的是当内容加载时你只检查一次窗口的宽度。你应该受到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）。

Answer 2

使用以下代码：

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

JS - 窗口宽度功能不起作用

2 个答案: