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

Question

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

有什么想法可以通过 IE 和 Edge 的（少量代码）来解决这个问题吗？

jQuery 3.x 已经加载到我的站点中，因此如果修复涉及使用该库中的某些内容来简化过渡（线性或缓动），那将是很棒的。同样不错的是用户可选择的默认设置来切换天气，详细信息应在页面加载时显示为“打开”或“关闭”。谢谢！

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 来切换一个类 - 就像在过去的美好时光一样 :)

Answer 2

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

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

edit：在 cmets 中，OP 要求使用 css 管理文章的初始状态，在移动设备和桌面设备上具有不同的行为。下面的 CSS 将使详细文章在移动设备上默认隐藏（通常被认为

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

如果您希望文章也隐藏在平板电脑上（实际上平板电脑的用户非常少，因此通常不会有那么大的问题），您可以将 767px 更改为 900-1000 范围内的某个位置，取决于你的选择。例如，Bootstrap 使用 991px。