css - 可折叠 HTML5 <detail><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

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

$(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 为例。