Javascript JQuery if语句未按预期工作

我正在使用bootstrap3并使用JQuery创建一个if语句，以便在单击主体上的任何内容时使导航栏折叠，但仅当浏览器宽度小于992px时。当浏览器为992px或更宽时，我希望忽略此函数。我下面的函数按预期工作，除了当主体在所有浏览器宽度上单击时“test”会记录到控制台，而只有当主体小于992px时才应该这样做。我下面的if语句是否有问题

if ($(window).width() < 992) {
    $('body').click(function() {
        console.log("test");
        $('.navbar-collapse').collapse('hide');
    });
};

if（$（窗口）.width（）<992）{
$（'body'）。单击（函数（）{
控制台日志（“测试”）；
$（'.navbar collapse'）。collapse（'hide'）；
});
};

我更新了代码，使if语句位于函数内部，如下所示。它仍然可以正常工作，并且只在正确的浏览器宽度上向控制台记录“测试”，但我想知道这是否是一种不好的方法，因为浏览器会在每次单击时检查其宽度，即使我不想这样做。这是一种糟糕的做事方式吗？尝试让我发布的第一个代码生效是更好的做法吗

$('body').click(function() {
    if ($(window).width() < 992) {
        console.log("test");
        $('.navbar-collapse').collapse('hide');
    };    
}); 

$（'body'）。单击（函数（）{
如果（$（窗口）.width（）<992）{
控制台日志（“测试”）；
$（'.navbar collapse'）。collapse（'hide'）；
};    
}); 

第二种方法是要走的路。当代码块最初执行时，如果宽度小于992，第一个将仅绑定

click

事件

---

如果用户在做出绑定/不绑定的初始决定后调整了浏览器的大小，该怎么办？这就是为什么每次单击时都需要检查宽度。

第二种方法就是要走的路。当代码块最初执行时，如果宽度小于992，第一个将仅绑定

click

事件

---

如果用户在做出绑定/不绑定的初始决定后调整了浏览器的大小，该怎么办？这就是为什么每次单击时都需要检查宽度。

如果使用绑定单击事件处理程序，则只能在屏幕小于所需宽度时使用事件绑定处理程序。函数完成了这项工作。例如：

var collapseNavbar = function() {
    console.log("test");//remove when done with testing
    $('.navbar-collapse').collapse('hide');
}

$(window).resize(function() {
    if($(window).width() < 992) {
        $('body').bind('click',collapseNavbar);
    } else {
        $('body').unbind('click',collapseNavbar);
    }
});

var collapseNavbar=function（）{
console.log（“test”）；//完成测试后删除
$（'.navbar collapse'）。collapse（'hide'）；
}
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<992）{
$（'body'）.bind（'click'，collapseNavbar）；
}否则{
$（'body'）。取消绑定（'click'，collapseNavbar）；
}
});

这样，窗口宽度的检查只在调整大小时/之后进行，而不是每次单击时进行

绑定函数可以按照您的意愿命名，只需确保它确实已命名，以便解除绑定可以正常工作。正如文件所说：

通过命名处理程序，我们可以确保不会意外删除其他函数

不过，我不确定页面加载时是否引发了调整大小事件。您可能需要添加一个小片段，以确保在宽度小于992px的浏览器窗口中显示该行为（即，如果在调整页面大小后刷新页面，或者如果您正在智能手机上查看页面）。像这样的东西应该可以做到：

$(document).ready(function() {
    if($(window).width() < 992) {
        $('body').bind('click',collapseNavbar);
    }
});

$（文档）.ready（函数（）{
如果（$（窗口）.width（）<992）{
$（'body'）.bind（'click'，collapseNavbar）；
}
});

如果使用绑定click事件处理程序，则只能在屏幕小于所需宽度时使用事件绑定处理程序。函数完成了这项工作。例如：

var collapseNavbar = function() {
    console.log("test");//remove when done with testing
    $('.navbar-collapse').collapse('hide');
}

$(window).resize(function() {
    if($(window).width() < 992) {
        $('body').bind('click',collapseNavbar);
    } else {
        $('body').unbind('click',collapseNavbar);
    }
});

var collapseNavbar=function（）{
console.log（“test”）；//完成测试后删除
$（'.navbar collapse'）。collapse（'hide'）；
}
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<992）{
$（'body'）.bind（'click'，collapseNavbar）；
}否则{
$（'body'）。取消绑定（'click'，collapseNavbar）；
}
});

这样，窗口宽度的检查只在调整大小时/之后进行，而不是每次单击时进行

绑定函数可以按照您的意愿命名，只需确保它确实已命名，以便解除绑定可以正常工作。正如文件所说：

通过命名处理程序，我们可以确保不会意外删除其他函数

不过，我不确定页面加载时是否引发了调整大小事件。您可能需要添加一个小片段，以确保在宽度小于992px的浏览器窗口中显示该行为（即，如果在调整页面大小后刷新页面，或者如果您正在智能手机上查看页面）。像这样的东西应该可以做到：

$(document).ready(function() {
    if($(window).width() < 992) {
        $('body').bind('click',collapseNavbar);
    }
});

$（文档）.ready（函数（）{
如果（$（窗口）.width（）<992）{
$（'body'）.bind（'click'，collapseNavbar）；
}
});