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

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');

    }
}

有什么想法吗？谢谢

特种部队: http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element

Answer 1

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

作为Amelia Bellamy-Royds puts it :

You can’t actually describe it’s basic behavior with the CSS model. The part that shows/hides isn’t in any particular element. Which means there’s no way to implement a media-query override that says if the screen is big enough, show this all the time. So it doesn’t replace all your show/hide navigation widgets.
Because open/closed is done through a simple attribute, and there is no pseudoclass, if you want to (a) have some elements open to start, and (b) change styles for open and closed, you might need some scripted support testing so your details[open] selectors don’t match on unsupporting browsers.

我想这就是问题所在。

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