为什么没有window.onresize工作？ （JavaScript的/ jquery的）

Question

我试图让这个网站在大屏幕上显示一个标签框，但只是在较小的屏幕上显示正常的布局。这就是我所拥有的：

function adapt() {
if(document.documentElement.clientWidth > 800) {

    $(document).ready(function() {

        $(".box").hide();
        $(".box:first").show(); 

        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active");
            $(this).addClass("active");
            $(".box").hide();
            var activeTab = $(this).attr("rel"); 
            $("#"+activeTab).show(); 
        });
    });

}else{
    $(document).ready(function () {
        $('.box').show();
    });
};}

window.onload = adapt();
window.onresize = adapt();

onload事件处理程序工作，因此tab-box jquery函数仅在页面加载到较大屏幕时才有效，并且在较小屏幕上加载时显示所有内容。我添加了onresize事件，因此当浏览器窗口缩小时它也会改变，但它不起作用。如果我在大屏幕上加载然后缩小它，所有显示的内容都是第一个选项卡中的内容，如果我在小屏幕上加载，然后使窗口变大，则显示所有内容和选项卡按钮不工作。我只是误解了window.resize应该如何工作？

我猜测事件可能仅在第一次调整大小时触发，如果差异不足以让我的其他条件接管，那么事情就不会发生。如果是这种情况，有没有办法让它不断检查屏幕大小，就像CSS媒体查询一样？

Answer 1

您需要调用引用，而不是执行函数

window.onload = adapt;
window.onresize = adapt;

因为你做的时候

window.onload = adapt();
window.onresize = adapt();

你执行adapt（），因为它什么也没有返回，你就没有对这些事件做过什么

Answer 2

不要忘记，如果项目中的其他代码也使用window.onresize或window.onload - 您的代码将被覆盖

使用addEventListener功能

是一种更好的做法

window.addEventListener('resize', adapt);

Answer 3

您可以尝试使用jquery：

$(document).ready(function() {
    adapt(); // onload
    $(window).resize(adapt()); // resize
});