HTML<；细节>；标签在IE/Edge中不起作用

我试图添加额外的可切换部分，用户可以显示和隐藏

我的要求：

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

并且考虑使用

标记，但是

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

切换
隐蔽的

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

不管怎样，我能“使”它工作吗，或者我还有什么可以用来完成这项任务的吗？只要不存在javascript，黑客就可以了。

您可以在一个页面上添加一次，以使页面上的所有

正常工作：

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

---

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

这将是建议的

：checked

方法，使用隐藏复选框：

.toggler{
显示：无；
}
.toggler+.toggler内容{
最大高度：0；
不透明度：0；
溢出：隐藏；
过渡：全部。4s轻松进出；
}
.toggler:选中+.toggler内容{
最大高度：1000px；
不透明度：1；
}

切换
隐蔽的

复制下面的脚本并将其放入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: "▼"; }'))});

！函数（e，t）{“函数”==typeof define&&define.amd？define（t）：“对象”==typeof exports？module.exports=t（）：t（）}（0，函数（）{var o=“details”，i=“summary”；（函数（）{var e=document.createElement（o）；if（！（“open”in e））返回！1；e.innerHTML=“ab”，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+=“无详细信息”，window.addEventListener（“单击”，函数（e）{if（“摘要”==e.target.nodeName.toLowerCase（））{var t=e.target.parentNodeNode；if（！t）return；t.getAttribute（“打开”）？（t.open=！1，t.removateAttribute（“打开”）：（t.open=！0，t.setAttribute（“open”，“open”）}），函数（e，t）{if（document.getElementById（e））返回；var n=document.createElement（“style”）；n.id=e，n.innerHTML=t，document.getElementsByTagName（“head”）[0]。appendChild（n）}（“详细信息多边形填充样式”，“html.no-details”+o+“：not（[open]）>：not（+i+”）{display:none；}\nhtml.no-details“+o+”>”：before{内容：▶"; 显示：内联块；字体大小：.8em；宽度：1.5em；}\nhtml.no-details'+o+“[open]>“+i+”：在{content:”之前▼"; }'))});

如果您不想看到箭头，只需从末端移除该部分即可

---

+o+“>”+i+”：在{content:▶“显示：内联块；字体大小：.8em；宽度：1.5em；}\nhtml.no-details'+o+“[open]>“+i+”：在{content:”▼“；}”

：目标

或

：选中

，如果添加了必要的附加元素（前者的链接，后者的复选框+标签）这不是问题，请解释这两种技术背后的基本原理。@CBroe太酷了，我想不起来。我猜你应该将其作为答案发布。你可能还需要更新ARIA expanded，使其与辅助工具一起工作，并添加tabindex=0，使其与键盘导航一起工作。@barefootliam请解决它完成。链接到一篇关于这个主题的文章，可能会有所帮助。