javascript - 为什么带有innerWidth的if语句不会改变它的行为？

Question

我有以下汉堡包图标代码'.navbar-toggle'(适用于小屏幕)和 Logo 图标(适用于大屏幕).cc

   if ($(window).innerWidth() > 768) {
      $('.navbar-toggle').click(function () {
          alert("wide screen");
      });
    } else { 
      $('.navbar-toggle').click(function () {
          alert("mobile");
      });
    }

• 所需的行为是当视口(viewport)/屏幕尺寸大于 768 像素时，我应该看到 alert("wide screen");。

它就是这样做的。但是，当我调整页面大小而不重新加载时，再次单击仍然会得到 alert("wide screen"); 而不是 alert("mobile");!!!

我想知道这段代码有什么问题，如果有更好的方法，我将不胜感激。

Answer 1

类似这样的事情吗？ http://jsfiddle.net/swm53ran/117/

$(document).ready(function() {
    $('.navbar-toggle').click(function () {
        if ($(window).innerWidth() > 768) {
            alert("wide screen");
        }
        else {
            alert("mobile");
        }
    });
});

if 语句位于按钮/链接的 onclick 内部。您之前看到的是屏幕的初始大小(当 if 语句位于单击之外时)。因此，在页面加载时，初始屏幕尺寸要么是宽屏，要么是移动设备，即使您调整了宽度，它仍然会超出初始宽度。但是，使用此代码，当触发点击事件时，它将检查当前屏幕尺寸并相应发出警报