为什么摘要和详细信息标签不起作用？答案

【问题标题】：Why isn't the summary and detail tag working?为什么摘要和详细信息标签不起作用？
【发布时间】：2014-07-13 18:00:37
【问题描述】：

我在这里尝试过这段代码

     <details>
      <summary>StudentResult</summary>
      <p> The student result are just average...</p>
     </details> 

    </body>
    </html>

我尝试使用的任何浏览器中都没有显示摘要和详细信息标签。为什么？

【问题讨论】：

@user3809384  cmets 是什么意思？你能更好地解释你的问题吗？谢谢。
什么不起作用，你的 html 和 body 开始标签在哪里
@user3809384 对我来说看起来很正常jsfiddle.net/g2x7W
@nsthethunderbolt 它在那里，但每次我推它一行时，它都会告诉我添加更多上下文。这是我的完整代码，我想知道为什么它应该有一个下拉列表的详细信息和摘要部分不起作用
@nsthethunderbolt 我在这里试过这段代码
StudentResult
学生成绩只是平均水平...
我尝试使用的任何浏览器中都没有显示摘要和详细信息标签。为什么？

标签： html

【解决方案1】：

mozila firefox 和 Internet Explorer 不支持<details> 和<summary> 标签。此外，它们仅受任何高于 12 的 google chrome 版本支持。因此，这取决于您使用的浏览器和版本。

以下链接会有所帮助：summary tag， details tag

【讨论】：

@user3809384 不要责备自己。:D.
投票需要 15 声望。我可能有负面影响
所有浏览器都支持，除了IE+Edge caniuse.com/#search=details
4 年后，仍然没有 IE 或 Edge 支持。微软真的丢球了。
4 年后，有人 ;-) 为不支持的浏览器编写了一个后备方案。你现在可以使用它，只要你实现了here提供的后备。

【解决方案2】：

试试看：

<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript" />
<script type="text/javascript">
$(function(){
$('#showNow').click(function(){
$('details').slideDown();
});
});
</script>
</head>
<body>
<button id='showNow'>Show</button>
     <details style='display:none;'>
      <summary>StudentResult</summary>
      <p> The student result are just average...</p>
     </details> 

    </body>
    </html>

【讨论】：

【解决方案3】：

如果您希望内容默认可见，则需要指定 open 属性。

<details open="open">
    <summary>StudentResult</summary>
    <p> The student result are just average...</p>
</details>

请记住，并非所有浏览器都有此功能的本机实现，因此如果您希望它在所有浏览器中都能正常工作，您可能需要使用一些 javascript 对其进行增强。

【讨论】：

我正在寻找类似的东西，但即使我输入了确切的代码，它也没有出现
blog.teamtreehouse.com/wp-content/uploads/2014/03/…
@user3809384：您正在测试哪些浏览器？在 Chrome 中，它的工作原理与 GIF 中显示的完全一样。
@user3809384：是的，就像我说的，大多数浏览器不支持这个功能。尝试 nsthethunderbolt 答案中的代码。它应该给你一个很好的起点。