javascript - JQuery if 语句未按预期工作

Question

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

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

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

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

Answer 1

第二种方法是可行的方法。如果代码块最初执行时宽度小于 992，第一个只会绑定(bind) click 事件。

如果用户在做出绑定(bind)/不绑定(bind)的初始决定后调整浏览器大小怎么办？这就是为什么您需要检查每次点击的宽度。