Javascript 开放式<；细节>；窗口宽度=>；768px

我正在开发一个响应性网站，在这里我使用

元素在服务部分显示传统信息

当窗口宽度>768px时，如何更改详细信息“打开”属性
只能使用css？

以下是html代码：

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

有什么想法吗？谢谢

Spetec：

---

您可以通过使用媒体查询的纯css来实现这一点。下面是一些示例的链接

您可以通过使用媒体查询的纯css实现这一点。下面是一些示例的链接

到目前为止，无法通过CSS修改

内容的显示（例如：

详细信息>*{display:block；}

用于媒体查询），因为似乎没有相关规范

作为：

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

我想这就是问题所在

---

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

到目前为止，无法通过CSS修改

内容的显示（例如：

详细信息>*{display:block；}

用于媒体查询），因为它似乎没有规范

作为：

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

我想这就是问题所在

---

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

谢谢，我在所有项目中都使用CSS媒体查询，但在这种特殊情况下，我不知道如何修改“打开”属性。它是在html代码中定义的：

用于关闭和显示内容

Hmm，而不是使用js来更改类，同样，您可以使用纯css并使用媒体查询来显示：无或显示：阻止元素。CSS无法更改页面上的代码，更改元素CSS类的唯一方法是JS。这个答案不考虑实际问题，即关于

元素模式以及是否可以使用CSS进行更改。谢谢，我在所有项目中都使用CSS媒体查询，但在这种特殊情况下，我不知道如何修改“打开的”属性它是在html代码中定义的：

用于关闭和显示内容

Hmm，而不是使用js来更改类，同样，您可以使用纯css并使用媒体查询来显示：无或显示：阻止元素。CSS无法更改页面上的代码，更改元素CSS类的唯一方法是JS。这个答案不考虑实际问题，即

元素模式以及是否可以使用CSS更改它们。

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

    }
}