jquery - 窗口大小更改时从 div 更改属性

Question

我使用 jQuery 移动。在这种情况下，当屏幕宽度小于 960px 时，我想将可折叠的数据角色添加到 div。

在我的示例中，它仅在您加载站点时才有效。但我希望，当我调整浏览器大小而不重新加载页面时它也可以工作。

例如，当您旋转平板电脑或手动调整浏览器窗口大小时，从 > 960 像素变为 < 960 像素。

$( document ).on( "pagebeforecreate", function() {
    if ($(window).width() < 960) {
       $(".medis_collaps").attr("data-role","collapsible")
    }
});

编辑

.resize() 不起作用，因为似乎我必须重新加载页面才能使 data-role="collapsible" 工作。

Answer 1

使用也 调整大小

$( window ).resize(function() {
   if ($(window).width() < 960) {
       $(".medis_collaps").attr("data-role","collapsible")
    }
});

Answer 2

您可以绑定调整大小和加载事件，如下所示：

$(window).on('resize load pagebeforecreate', function(){
    if ($(window).width() < 960) {
       $(".medis_collaps").attr("data-role","collapsible")
    }
});

在这种情况下，没有必要为任何事件绑定相同的功能。

Answer 3

你可以这样使用：

$( document ).on( "load resize pagebeforecreate", function() {
    if ($(window).width() < 960) {
       $(".medis_collaps").attr("data-role","collapsible")
    }
});