HTML <details>标签在IE / Edge中不起作用

Question

我试图添加用户可以显示和隐藏的其他可切换部分。

我的要求：

• 在主要浏览器（Opera，Chrome，Edge，IE11，Firefox，Mac上的Safari）上受支持
• 没有JavaScript

并且正在考虑使用<details>标签，但是代码

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

在Edge / IE浏览器上不起作用。

我能否以某种方式“使其”工作，或者还有其他可用于该任务的东西吗？只要没有JavaScript，就可以使用Hack。

Answer 1

您可以在页面上添加一次polyfill，以使页面上的所有<details/>s 都可以工作：

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

我知道这是一个JS解决方案，但不需要为每个人编写任何JS <details/>。它可以与在所见即所得编辑器中编写的文本一起使用。

Answer 2

这将是: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 元素。