打开 窗口宽度=> 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-details-element

Answer 1

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

Answer 2

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

作为Amelia Bellamy-Royds puts it：

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

我想这就是问题所在。

您可以通过应用丑陋的checkbox-hack来处理此行为（仅基于CSS的隐藏/显示切换在某些媒体查询上）。