3


レスポンシブウェブサイトを開発しており、<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

4

2 に答える 2

0

現在のところ、CSSを介してコンテンツの表示を変更する方法はありません<details>（たとえばdetails > * { display: block; }、メディアクエリの場合など）。これは、仕様がないように見えるためです。

アメリアベラミーロイズが言うように：

CSSモデルで実際にその基本的な動作を説明することはできません。表示/非表示の部分は特定の要素にはありません。つまり、画面が十分に大きい場合は常にこれを表示するというメディアクエリオーバーライドを実装する方法はありません。したがって、すべての表示/非表示ナビゲーションウィジェットを置き換えるわけではありません。
open / closedは単純な属性を介して実行され、疑似クラスがないため、（a）いくつかの要素を開いて開始し、（b）openとclosedのスタイルを変更する場合は、スクリプトによるサポートテストが必要になることがあります。詳細[開く]セレクターは、サポートされていないブラウザーと一致しません。

私が思うに、それは質問が何であったかということです。

ただし、醜いチェックボックスハックを適用することで、この動作（特定のメディアクエリでのみ完全なCSSベースの非表示/表示の切り替え）を処理できます。

于 2019-02-14T12:02:06.593 に答える
-4

メディアクエリを使用して、純粋なcssでこれを実現できます。ここにいくつかの例へのリンクがありますhttp://www.techrepublic.com/blog/webmaster/how-to-create-media-queries-in-sensitive-web-design/1789

于 2013-03-23T16:44:05.430 に答える