HTML< details>标记在IE/Edge中不起作用 [英] HTML <details> tag does not work in IE/Edge

问题描述

我正在尝试添加其他可显示和隐藏的可切换部分.

I am trying to add additional toggleable section that user can show and hide.

我的要求:

• 在主要浏览器(Opera，Chrome，Edge，IE11，Firefox，Mac上的Safari)上受支持
• 没有javascript

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

And was thinking of using the <details> tag, however the code

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

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

does not work on the Edge / IE browsers.

我能以某种方式使"它工作吗，或者还有其他可用于该任务的东西?只要没有javascript，就可以使用hacks.

Can I anyhow "make" it work, or is there anything else I can use for that task? Hacks are OK, as long as no javascript is present.

推荐答案

这将是建议的使用隐藏复选框的:checked方法:

This would be the suggested :checked method utilizing a hidden checkbox:

.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元素.

I would still prefer going with @Finesse's solution because it allows you to use the semantically correct HTML element for the purpose.

这篇关于HTML< details>标记在IE/Edge中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！