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

Question

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

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

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

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

编辑

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

Answer 1

也可以使用 resize

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

Answer 2

你可以绑定resize和load事件如下：

$(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")
    }
});