3

如何让 HTML5 的detailsandsummary标签在所有浏览器上工作？我可以让详细信息和摘要标签与谷歌浏览器一起使用，但我无法让它与任何其他浏览器一起使用。

4

2 回答 2

0

这是一个老问题，但浏览器对详细信息和摘要标签的支持仍然有限。我发现一篇有用的博文是： http: //blog.teamtreehouse.com/use-details-summary-elements。它使用 jquery 来实现向后兼容性。

于 2015-03-19T15:24:33.643 回答
0

我用它来让它在所有不支持的浏览器上工作：

if(this.parentElement.getAttribute('open')!='open') 
  this.parentElement.setAttribute('open','open'); 
else this.parentElement.removeAttribute ('open'); 
return false;


details summary {display: block;}
details summary::before {content: "▸ ";}
details[open="open"] summary::before {content: "▾ ";}
details summary ~ * {
    display: none;
}
details[open] summary ~ * {
    display: block;
}
<details>
  <summary onclick="if(this.parentElement.getAttribute('open')!='open') this.parentElement.setAttribute('open','open'); else this.parentElement.removeAttribute ('open'); return false;">{{ item.title }}</summary>
  {{ item.content }}
</details>

请注意，Firefox 设置了一个空的“打开”属性。您想通过使用 javascript 将其设置为“打开”来规范化它。

没有JS？没问题，您将拥有默认行为。JS 只会尝试接管浏览器的实现并设置或删除属性。CSS 将接管显示和隐藏（基于 'open' 属性）。CSS 规则完美地模拟了正常和行为，因此不会影响/改变或破坏它。因为细节/摘要实现现在完全支持 JS 和 CSS，它也可以在所有不支持的浏览器上工作。

于 2018-10-02T11:21:07.373 回答