jquery - 未捕获的TypeError : Cannot read property 'clientWidth' of null

我有一个响应式的wordpress主题。屏幕尺寸为740以下时，菜单已编码为隐藏。但是，仅在主页上正确执行此操作。如果我转到任何其他页面，菜单将折叠，但无法隐藏，并且出现此错误:“Uncaught TypeError:无法读取null的属性'clientWidth'”

这是代码，在主题的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();
});

最佳答案

我会说使用来自jQuery的$(window).width();。它返回浏览器视口(viewport)的宽度，这是等效的，或者我会说是传统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();
});

关于jquery - 未捕获的TypeError : Cannot read property 'clientWidth' of null，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15876302/