web-dev-qa-db-ja.com

HTML <details>タグがIE / Edgeで機能しない

ユーザーが表示および非表示にできる切り替え可能なセクションを追加しようとしています。

私の要件：

  • 主要なブラウザー（Opera、Chrome、Edge、IE11、Firefox、MacのSafari）でサポート
  • javaScriptなし

そして、<details>タグ、ただしコード

<details>
  <summary>Toggle</summary>
  <p>Hideable</p>
</details>

edge/IEブラウザでは機能しません。

とにかくそれを「機能させる」ことができますか、それともそのタスクに使用できる他に何かありますか？ JavaScriptが存在しない限り、ハックは問題ありません。

htmlinternet-explorermicrosoft-edge
8
user7499664

これは推奨される:checked非表示のチェックボックスを利用する方法：

.toggler {
  display: none;
}

.toggler+.toggler-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all .4s ease-in-out;
}

.toggler:checked+.toggler-content {
  max-height: 1000px;
  opacity: 1;
}
<div>
  <label for="toggler-id-1">Toggle</label>
  <input type="checkbox" id="toggler-id-1" class="toggler" />
  <div class="toggler-content">Hideable</div>
</div>

@Finesseのソリューションを使用することをお勧めします。目的のために意味的に正しいHTML要素を使用できるからです。

5
connexo

ページに a polyfill を1回追加して、ページ上のすべての<details/>sを機能させることができます。

<!-- Inside the body -->
<script src="//cdn.jsdelivr.net/npm/details-polyfill@1/index.min.js" async></script>

私はこれがJSソリューションであることを知っていますが、個々の<details/>にJSを書く必要はありません。 WYSIWYGエディターで書かれたテキストで使用できます。

9
Finesse