Jquery 如果最小宽度为900px，则更改状态

我发现了一个很好的JSFIDLE示例

逐步指南
开始
一,。报名参加免费试用

---

如果我加上，它会膨胀。现在我希望当我在900px以上的屏幕上时，它被扩展，但是当我在900像素以下的屏幕上时，我如何改变它不被扩展。我知道，如果我移除其中的“开口”，它将被折叠。这就是jquery的用武之地，还是我该怎么做？

试试jquery的

preventDefault（）

和

$（window）.resize（）

选中此选项（调整视口大小）

$（文档）。在（'click'，'details'，函数（e）{
如果（$（窗口）.width（）<900）{
e、 预防默认值（）；
}
});
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<900）{
$（'details'）.removeAttr（'open'）；
}
});

这就是您所需要的jQuery：

$details = $("details"), $window = $(window);
$window.on('resize',function(){
    if($window.height() > 900) $details.attr('open',true);
    else $details.filter('[open]').removeAttr('open');
}).resize();

它将根据调整大小时窗口的高度自动添加或删除

演示：

---

注意：我在演示中使用了

600

，而不是

900

，因此效果在预览大小中得到了演示。

您应该知道，Firefox和IE不支持详细信息和摘要元素，因此您可能希望在其他地方寻找此类功能。否则，Mooseman的想法是正确的，您需要绑定resize并切换open属性。这里有更多的阅读：

---

---

您是否尝试过使用matchmedia js？我会关注这个，因为我会经常使用这个。非常感谢您的帮助这也很好，非常感谢您的快速响应

$(document).on('click', 'details', function(e) {
if($(window).width() < 900) {
    e.preventDefault();
}
});

$(window).resize(function() {
if($(window).width() < 900) {
    $('details').removeAttr('open');
}
});

$details = $("details"), $window = $(window);
$window.on('resize',function(){
    if($window.height() > 900) $details.attr('open',true);
    else $details.filter('[open]').removeAttr('open');
}).resize();