3


我正在开发一个响应式网站，我在其中使用<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

4

2 回答 2

0

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

正如Amelia Bellamy-Royds 所说：

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

我想这就是问题所在。

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

于 2019-02-14T12:02:06.593 回答
-4

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

于 2013-03-23T16:44:05.430 回答