<details> 窗口宽度 => 768px 时打开元素

Question

我正在开发一个响应式网站，使用<details> <summary>元素在服务部分显示传统信息

当窗口宽度>768px时，如何更改详细信息的"打开"属性
只使用css是可能的吗

这是html代码：

<section id="services">
    <section>
        <details>
            <summary>info</summary>
            <p>A paragraph with especific information</p>
        </details>
   </section>
</section>  

我可以使用这样的javascript代码，但更喜欢css：

  var desplegable = $("#services section details");
if ($(window).width() > 768) {
    if (desplegable.attr("open") != "open"){ 
        desplegable.attr('open','true');
    }
}

知道吗？感谢

Spetec：http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-细节元素

Answer 1

到目前为止，还没有办法通过CSS修改<details>内容的显示(例如：用于媒体查询的details > * { display: block; }(，因为似乎没有规范。

正如艾米莉亚·贝拉米·罗伊兹所说：

实际上，你无法用CSS模型来描述它的基本行为。显示/隐藏的部分不在任何特定元素中。这意味着没有办法实现媒体查询覆盖，即如果屏幕足够大，则始终显示此内容。因此，它不会取代所有显示/隐藏导航小部件
因为打开/关闭是通过一个简单的属性完成的，并且没有伪类，所以如果你想(a(打开一些元素来启动，(b(更改打开和关闭的样式，你可能需要一些脚本化的支持测试，这样你的详细信息[打开]选择器就不会在不支持的浏览器上匹配。

我想这就是问题所在。

不过，你可以通过应用丑陋的复选框破解来处理这种行为(仅在某些媒体查询上进行完全基于CSS的隐藏/显示切换(。

Answer 2

您可以使用媒体查询使用纯css来实现这一点。以下是一些示例的链接http://www.techrepublic.com/blog/webmaster/how-to-create-media-queries-in-responsive-web-design/1789