详细信息和摘要标签兼容性问题 [英] Details and summary tag compatibility issues

问题描述

如何获取HTML5的details和summary标记以在所有浏览器上运行? 我可以获取详细信息和摘要标记以与Google chrome一起使用，但不能与其他任何浏览器一起使用.

How do you get the details and summary tag for HTML5 to work on all browsers? I can get the details and summary tag to work with google chrome but i can't get it to work with any other browser.

推荐答案

我使用它来使其在所有不支持的浏览器上都能正常工作:

I use this to get it to work on all non-supporting browsers:

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将其设置为打开"来对其进行规范化.

Note that Firefox sets an empty 'open' attribute. You want to normalize that by setting this with javascript to 'open'.

没有JS吗?没问题，您将拥有默认的行为. JS只会尝试接管浏览器的实现并设置或删除属性. CSS将接管显示和隐藏(基于'open'属性). CSS规则完美地模仿了正常行为，因此不会影响/更改或破坏它.由于详细信息/摘要实现现在完全由JS和CSS支持，因此它也可以在所有不支持的浏览器上使用.

No JS? No problem, you will have the default behaviour. JS will just try to take over the browsers implementation and set or remove the attribute. CSS will take over the showing and hiding (based on the 'open' attribute). The CSS rule perfectly emulates the normal and behaviour, and therefore does not influence/change or break it. Because the detail/summary implementation is now fully JS and CSS backed, it will also work on all non-supporting browsers.

这篇关于详细信息和摘要标签兼容性问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！