详细信息和摘要标签兼容性问题答案

【问题标题】：Details and summary tag compatibility issues详细信息和摘要标签兼容性问题
【发布时间】：2014-05-03 20:49:35
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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，所以它也可以在所有不支持的浏览器上运行。

【讨论】：