為什么如果帶有innerWidth的語句不改變其行為？

Question

對於漢堡圖標'.navbar-toggle' （用於小屏幕）和徽標圖標（用於大屏幕），我有以下代碼

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

• 所需的行為是，當視口/屏幕尺寸大於768px時，我應該看到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語句位於點擊之外時）。 因此在頁面加載時，初始屏幕尺寸要么是寬屏屏幕尺寸，要么是移動屏幕尺寸，即使您調整了寬度，它仍然無法使用初始寬度。 但是，使用此代碼，當觸發點擊事件時，它將檢查當前屏幕尺寸並相應地發出警報

Answer 2

刪除$('.navbar-toggle')部分，邏輯將正常工作。

我懷疑這是因為代碼運行一次，看到窗口很大，並且綁定了第一次單擊處理程序。 即使調整窗口大小，該處理程序也永遠不會不受約束，因此它將始終被觸發。

在現實生活中，這種行為可能很好，因為大多數人不會調整窗口大小並期望UX突然改變。 但是，如果要使頁面正確響應，則應注意窗口大小調整事件，並在發生這種情況時（取消）綁定處理程序。