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

Question

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

我的要求：

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

并考虑使用<details>标签，但代码

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

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

我可以无论如何“使”它的工作，或者还有什么我可以用于该任务？只要没有javascript，黑客就可以了。

Answer 1

这将是使用隐藏复选框的建议: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元素。

Answer 2

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

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

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

Answer 3

复制以下脚本并将其放入js文件中，然后将其导入或直接写入标签。这对我有用。

!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():t()}(0,function(){var o="details",i="summary";(function(){var e=document.createElement(o);if(!("open"in e))return!1;e.innerHTML="<"+i+">a</"+i+">b",document.body.appendChild(e);var t=e.offsetHeight;e.open=!0;var n=t!=e.offsetHeight;return document.body.removeChild(e),n})()||(document.documentElement.className+=" no-details",window.addEventListener("click",function(e){if("summary"===e.target.nodeName.toLowerCase()){var t=e.target.parentNode;if(!t)return;t.getAttribute("open")?(t.open=!1,t.removeAttribute("open")):(t.open=!0,t.setAttribute("open","open"))}}),function(e,t){if(document.getElementById(e))return;var n=document.createElement("style");n.id=e,n.innerHTML=t,document.getElementsByTagName("head")[0].appendChild(n)}("details-polyfill-style","html.no-details "+o+":not([open]) > :not("+i+") { display: none; }\nhtml.no-details "+o+" > "+i+':before { content: "▶"; display: inline-block; font-size: .8em; width: 1.5em; }\nhtml.no-details '+o+"[open] > "+i+':before { content: "▼"; }'))});

如果你不想要那个箭头，那么只需从末尾删除这个部分

+ o +“>”+ i +'：在{content：“▶”之前; display：inline-block; font-size：.8em;宽度：1.5em; } \ nhtml.no-details'+ o +“[open]>”+ i +'：before {content：“▼”; }”