Question

我在这里试过这段代码

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

    </body>
    </html>

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

Answer 1

mozila firefox和Internet Explorer不支持

<details>和<summary>标记。此外，它们仅受到任何版本的谷歌浏览器高度支持，因此它取决于您使用的浏览器和版本。

以下链接将有助于：summary tag， details tag

Answer 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>

Answer 3

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

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

请注意，并非所有浏览器都有本机实现，因此如果您希望它在所有浏览器中都能正常工作，则可能需要使用某些javascript来增强它。

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

3 个答案: