可折叠 HTML5 <detail><summary> 适用于 FF 和 Chrome，但不适用于 IE 和 Edge

Question

标准可折叠 HTML5 语义标记 <detail> 和 <summary> 终于在 FireFox 和 Chrome 中完美运行，但在 IE 和 Edge 中却不行。

关于如何使用 IE 和 Edge 的（少量代码）解决这个问题有什么想法吗？

jQuery 3.x 已经加载到我的站点中，因此如果修复涉及使用该库中的某些内容来简化过渡（线性或缓动），那就太好了。同样不错的是用户可选择的默认设置来切换天气细节应该在页面加载时显示 "open" 或 "closed"。谢谢！

if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge/i.test(navigator.userAgent)){

$(function(){
 $('summary').click(function(){
  $(this).parent().find('article').slideToggle();
 });
});

}

details{
}
summary{
 cursor: pointer; cursor: hand;
 background-color: blue;
 display: block;
 padding: 10px;
 margin: 0 0 20px 0;
}

summary:after {
  background: yellow;
  content: "+";
  float: left;
  margin: 0 5px 0 0;
  padding: 0;
  text-align: center;
  width: 20px;
}
details[open] summary:after {
 content: "-";
}

details summary::-webkit-details-marker {
 display:none; /* hides the standard > sign */
}
summary:focus {outline:0 !important;} /* hides the blue borderin chrome, once clicked */

@keyframes slideDown {
    0% {
        opacity: 0;
        height: 0;
    }
    100% {
        opacity: 1;
        height: 100%;
    }
}

details[open] {
    animation-name: slideDown;
    animation-duration: 500ms;
    animation-timing-function:lineair;
}

article {display: block;} 
@media screen and (max-width: 767px) { 
    article {display:none;} 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<details>
<summary>Testing Testing</summary>
<article class="project">
<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen). De noodzakelijke hoeveelheid te verversen lucht (debiet) hangt af van de productie van vocht, koolstofdioxide (CO²) en verontreiniging en de aard van de verontreiniging, en van het aantal mensen die in die ruimten verblijven. Spuiventilatie of luchten is niet hetzelfde als de hier genoemde ventilatie, maar heeft ten doel in korte tijd sterk verontreinigde binnenlucht af te voeren of te spuien. Dit kan worden bereikt door ramen en/of deuren tegen elkaar open te zetten. Bij de meeste woningen gebeurt de ventilatie ongecontroleerd: doordat de wind in kieren en spleten waait, ververst de lucht. Dit zorgt in vele gevallen voor overbodige ventilatie, een onaangenaam binnenklimaat en dus ook voor warmteverliezen. Men kan dit verminderen door tijdens het bouwen en onderhoud aandacht te besteden aan luchtdichtheid.  Meestal wordt daarvoor een dampscherm geplaatst tegen de isolatie. Men dient rekening te houden met de vochthuishouding: als de warme vochtige binnenlucht kan doordringen tot in de isolatie zal deze lucht afkoelen naarmate de buitenmuur benaderd wordt, waardoor er condensatie kan optreden die de isolatiewaarde weer doet verminderen en is een dampdichte laag nodig om het damptransport te verminderen. Om dit makkelijker te onthouden zijn de dampremmende folies meestal rood (warm; binnenkant) en de damp-open folies blauw.</p>
</article>
</details>

Answer 1

这些浏览器根本不支持 open 属性，某些语义标签（例如 <summary>）也不支持。我认为这就是您的 css 规则未被应用的原因。

https://www.w3schools.com/tags/att_details_open.asp https://www.w3schools.com/tags/tag_summary.asp

也许可以更改 jQuery 以切换 class - 就像过去的美好时光:)

Answer 2

在您的示例中，这应该可以完成工作。这使得它专门扩展了文章，而不是容器（详细信息）

$(function(){
    $('summary').click(function(){
        $(this).parent().find('article').slideToggle();
    });
});

编辑：在评论中，OP 要求使用 css 管理文章的初始状态，在移动设备和桌面设备上有不同的行为。以下 CSS 将使详细文章在移动设备上默认隐藏（通常认为 <768px 宽度）并在更大的所有内容上展开。

article {display: block;} 
@media screen and (max-width: 767px) { 
    article {display:none;} 
}

如果您希望文章也隐藏在平板电脑上（实际上，平板电脑在用户中只占极少数，因此通常不是那么重要），您可以将 767px 更改为 900- 1000范围内，取决于您的选择。 Bootstrap 例如使用 991px。

可折叠 HTML5 <detail><summary> 适用于 FF 和 Chrome，但不适用于 IE 和 Edge

Collapsable HTML5 <detail><summary> works in FF and Chrome, but not in IE and Edge

css

html

css-transitions

semantic-markup

collapsable