jQuery 未捕获的类型错误：无法读取 null 的属性“clientWidth”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15876302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'clientWidth' of null
提问by user2257001
I have a responsive wordpress theme. The menu is coded to hide when the screen size is bellow 740. However it only does this correctly on the home page. If I go to any other page the menu collapses but it fails to hide and I get this error: "Uncaught TypeError: Cannot read property 'clientWidth' of null"
我有一个响应式 wordpress 主题。当屏幕尺寸低于 740 时，菜单被编码为隐藏。但是它只在主页上正确执行此操作。如果我转到任何其他页面，菜单会折叠但无法隐藏，并且出现此错误：“未捕获的类型错误：无法读取 null 的属性‘clientWidth’”
Here's the code, I have it being called in the header.php file of the theme:
这是代码，我在主题的 header.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();
});
回答by Gabriel Dzul
try adding your script at the end of the document. The reason is that, a the beginning your document width is zero, because you content is not loaded yet, so there's nothing to display and so, you width is zero
尝试在文档末尾添加您的脚本。原因是，一开始你的文档宽度为零，因为你的内容还没有加载，所以没有什么可显示的，所以你的宽度为零
回答by Rahul Patil
I would say use $(window).width();from jquery. It returns width of browser viewport Which is equivalent or I would say better alternative for traditional javascript.
我会说$(window).width();从 jquery使用。它返回浏览器视口的宽度，这是等效的，或者我会说传统 javascript 的更好替代方案。
Your code will look something like this. Check if it works.
您的代码看起来像这样。检查它是否有效。
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();
});
