打開 <details> 窗口寬度=&gt; 768px時的元素

Question

我正在開發一個響應式網站，在其中我使用<details> <summary>元素在服務部分顯示附加信息。

當窗口寬度> 768px時，如何更改詳細信息“ open”屬性？
只能使用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; }對於媒體查詢，例如： details > * { display: block; } 。），因為似乎尚無規范。

正如Amelia Bellamy-Royds所說 ：

您實際上無法使用CSS模型描述它的基本行為。 顯示/隱藏的部分不在任何特定元素中。 這意味着無法實現媒體查詢覆蓋，即如果屏幕足夠大，請始終顯示此內容。 因此，它不會替代您所有的顯示/隱藏導航小部件。
因為打開/關閉是通過一個簡單的屬性完成的，並且沒有偽類，所以如果您要（a）打開一些要開始的元素，並且（b）更改打開和關閉的樣式，則可能需要一些腳本化的支持測試，因此您的詳細信息[打開]選擇器在不支持的瀏覽器上不匹配。

我想的是問題所在。

您可以通過應用丑陋的checkbox-hack來處理此行為（僅在某些媒體查詢上完全基於CSS的隱藏/顯示切換）。

Answer 2

您可以使用媒體查詢通過純CSS實現此目的。 這是一些示例的鏈接， 網址為http://www.techrepublic.com/blog/webmaster/how-to-create-media-queries-in-sensitive-web-design/1789