Question

我正在使用Bootstrap 3并使用JQuery创建if语句，以便在单击正文上的任何内容时使我的导航栏折叠，但仅当浏览器宽度小于992px时。当浏览器为992px或更宽时，我希望忽略此功能。我的下面的函数按预期工作，除了在所有浏览器宽度上单击正文时“test”被记录到控制台的事实，当它仅在小于992px时才会这样做。我下面的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，则第一个将仅绑定click事件。

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

Answer 2

如果使用.bind()绑定单击事件处理程序，则可以使用.resize()事件仅在屏幕低于所需宽度时绑定处理程序。 .unbind()函数完成了这项工作。例如：

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);
    }
});

这样，只有在调整大小时/之后才会检查窗口宽度，而不是每次点击。

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

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

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

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

JQuery if语句不能正常工作

2 个答案: