未捕獲TypeError：無法讀取null的屬性'clientWidth'

Question

我有一個響應式WordPress主題。當屏幕大小低於740時，該菜單被編碼爲隱藏。但是，它僅在主頁上正確顯示。如果我去任何其他頁面的菜單崩潰，但它無法隱藏，我得到這個錯誤：「未捕獲TypeError：無法讀取屬性'clientWidth'爲null」

這裏的代碼，我有它被稱爲標題主題的PHP文件：

var ww = document.body.clientWidth; 
$(document).ready(function() { 
    adjustMenu(); 


    $(".cat").click(function(e) { // cat class 
     e.preventDefault(); 
     $(this).toggleClass("active"); 
     $(".sf-menu").toggle(); 
    }); 
}); 

function adjustMenu() { 
    if (ww <= 740) { //change this to your breakpoint 
     $('.sf-menu').hide(); 
     $(".cat").show(); 
     if (!$(".cat").hasClass("active")) { 
      $(".sf-menu").hide(); 
     } else { 
      $(".sf-menu").show(); 
     } 
    } else { 
     $('.sf-menu').show(); 
     $(".cat").hide(); 

    } 
} 


$(window).bind('resize orientationchange', function() { 
    ww = document.body.clientWidth; 
    adjustMenu(); 
}); 

Answer 1

我會說使用$(window).width();從jQuery的。它返回瀏覽器視口的寬度，這是相當於或我會說更好的替代傳統的JavaScript。

你的代碼看起來像這樣。檢查它是否有效。

var ww = $(window).width(); 
$(document).ready(function() { 
    adjustMenu(); 


    $(".cat").click(function(e) { // cat class 
     e.preventDefault(); 
     $(this).toggleClass("active"); 
     $(".sf-menu").toggle(); 
    }); 
}); 

function adjustMenu() { 
    if (ww <= 740) { //change this to your breakpoint 
     $('.sf-menu').hide(); 
     $(".cat").show(); 
     if (!$(".cat").hasClass("active")) { 
      $(".sf-menu").hide(); 
     } else { 
      $(".sf-menu").show(); 
     } 
    } else { 
     $('.sf-menu').show(); 
     $(".cat").hide(); 

    } 
} 


$(window).bind('resize orientationchange', function() { 
    ww = document.body.clientWidth; 
    adjustMenu(); 
    }); 
    function adjustMenu() { 
     if (ww <= 740) { //change this to your breakpoint 
     $('.sf-menu').hide(); 
     $(".cat").show(); 
     if (!$(".cat").hasClass("active")) { 
      $(".sf-menu").hide(); 
     } else { 
      $(".sf-menu").show(); 
     } 
    } else { 
     $('.sf-menu').show(); 
     $(".cat").hide(); 

    } 
} 


$(window).bind('resize orientationchange', function() { 
    ww = $(window).width(); 
    adjustMenu(); 
}); 

Answer 2

嘗試在文檔的末尾添加腳本。 原因是，一開始你的文檔寬度爲零，因爲你的內容尚未加載，所以沒有什麼可顯示的，所以，你的寬度爲零