問題タブ [details-tag]

レスポンシブウェブサイトを開発しており、<details> <summary>要素を使用してサービスセクションに追加情報を表示しています。

ウィンドウ幅が768pxを超える場合、詳細の「open」属性を変更するにはどうすればよいですか？
cssだけでできるのですか？

これがhtmlコードです：

私はこのようなJavaScriptコードを使用できますが、cssを好みます：

何か案が？ありがとう

Spetec： http ://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element

要素 (この場合は概要) があり、そのすぐ下にボックスがあります。詳細をクリックして要約のコンテンツを表示すると、残りのコンテンツが下のボックスによってブロックされます。ボックスがその上にあるため、要約の残りが表示されません。

パス上の何かをカバーしてすべてのコンテンツを表示するようにサマリー要素を作成するにはどうすればよいですか?

現在、JSP で details/summary 要素を使用しています。アクセシビリティをテストするために VoiceOver をオンにすると、詳細要素に達すると VoiceOver が停止します。どうすればいいのか分からないようです。

そのための回避策があるかどうか、何か考えはありますか? http://www.accessibleculture.org/articles/2012/03/screen-readers-and-details-summary/で説明されているように、 role="button" と aria-expanded="false" を要約要素に追加しようとしましたしかし、それは何も変わりませんでした。

これをテストするために、iOS 6.1.3 を搭載した iPhone を使用しています。

会社の FAQ セクションに HTML5 タグの詳細を使用しています。問題は、ユーザーが別の質問を開いた場合、他の質問が自動的に閉じないことでした。したがって、Webで検索したところ、次の解決策が見つかりました。

このコードはある意味で正しく機能しますが、いくつかの小さな問題があります。2 つの質問を同時に開き、おかしな動作をすることがあります。これが適切に機能する方法はありますか？これは、デスクトップ、タブレット、モバイルで動作するはずです。

望ましくない影響:

すべてのコードでフィドルhttp://jsfiddle.net/877tm/を作成しました。JavaScript はそこで動作しています。ライブで見たい場合は、ここをクリックしてください。

アクセシビリティを向上させるために、新しい HTML5details要素を使用するようにサイトをアップグレードしています。

すべて問題なく動作していますが、残念ながら要素をクリックして開くと、Chrome は醜い青い境界線を適用します。

Chromeがこれを行うのを止める方法はありますか? 明示的な CSS スタイルが適用されているのがわからないので、それを取り除く方法がわかりません。

問題をデモするための JSFiddle コード: http://jsfiddle.net/6x2Kc/

HTML5のdetailsandタグをすべてのブラウザで動作させるにはどうすればよいですか? summary詳細タグと要約タグを Google Chrome で動作させることはできますが、他のブラウザーでは動作させることができません。

Knockout.js を使用して、一連の HTML5<details>要素を設定しています。構造は次のとおりです。

ViewModel のデータは次のようになります。

詳細ビューの開閉状態を記憶する機能を追加したいです。jQuery以前に and localStorage¹を使用してこの動作を実装しましたが、このプロジェクトでは、jQuery を使用する代わりに Knockout をネイティブに使用したいと考えています。

ページの読み込み時にisOpen取得される ViewModel のプレイリストにプロパティを追加しました。localStorageただし、HTML5 仕様では、値ではなく、属性の有無のみを検索するように指定されているattrため、Knockout でバインディングを使用できないようです。open

ViewModel のプロパティが変更されたときに、Knockout で要素のopenプロパティを追加および削除するにはどうすればよいですか?<details>isOpen

¹ : このように:

Knockout.js を使用して、一連の HTML5<details>要素を設定しています。構造は次のとおりです。

ViewModel のデータは次のようになります。

ViewModel のプロパティとバインディングを使用して、詳細ビューの開いている状態または閉じている状態を記憶する機能を追加しました(最初に説明したように ここ)。isOpenattr

ただし、クリックし<summary>て詳細を展開しても、ViewModel は更新されません。バインディングとは異なりvalue、attrバインディングは双方向ではありません。

属性値が変更されたときにこのバインディングを更新するにはどうすればよいですか?

要素が開いたり閉じたりしたときにブラウザがイベントをトリガーすることは知っていますが、DOMSubtreeModifiedそこに何を入れるかはわかりません-私が試したいくつかのこと（、、などを含む.notifySubscribers()）if (list.open()) ...がループを引き起こし、プロパティが変更されるとイベント トリガーが再び発生すると、プロパティが再び変更され、イベントが再びトリガーされます。