Question

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

  <article>

     <details>
      <summary>Step by Step Guides</summary>

        <summary>Getting Started</summary>
        <p>1. Signup for a free trial</p>
      </details>
  </article>

如果我添加它将扩展。现在，当我在900px以上的屏幕上时，我想要扩展它，但是当我在900像素以下的屏幕上时，如何将其更改为不扩展。我知道如果我删除它中的“打开”将会崩溃。这是jquery出现在哪里或我该怎么做？

Answer 1

尝试jQuery的preventDefault()和$(window).resize()

检查此DEMO (resize)（调整视口大小）

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

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

Answer 2

这是你需要的所有jQuery：

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

它将自动添加或删除open attribute，具体取决于调整大小时窗口的高度。

演示：http://jsfiddle.net/0tdbbfmd/

注意：我在演示中使用了600而不是900，因此效果会在预览尺寸中得到体现。

Answer 3

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

http://caniuse.com/#feat=details

http://html5doctor.com/the-details-and-summary-elements/

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

3 个答案: