Question

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

当窗口宽度＆gt;时，如何更改细节“打开”属性？ 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修改<details>内容的显示（例如：details > * { display: block; }用于媒体查询。）

为Amelia Bellamy-Royds puts it：

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

我想这是什么问题。

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

Answer 2

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

的链接

当window width =＆gt;时打开<details>元素768px </细节>

2 个答案: