HTML5 details元素的功能检测和样式

As I discussed in the article that introduced the tags, the details and summary elements are excellent ways to create accordion interfaces on web pages. Until recently, features like this have required a mass of JavaScript. (Indeed, frameworks like JQuery UI have entire modules devoted to supporting them).

正如我在介绍标签的文章中所讨论的那样， details和summary元素是在网页上创建手风琴界面的绝佳方法。 直到最近，像这样的功能都需要大量的JavaScript 。 (实际上，像JQuery UI这样的框架具有用于支持它们的整个模块)。

As I mentioned in the previous article, there are a few issues to using details today, mostly around lack of support in and Microsoft Edge. Thankfully, these are easy to solve with a combination of CSS and a little JavaScript feature detection and DOM manipulation.

正如我在上一篇文章中提到的那样，今天使用details存在一些问题，主要与缺少Microsoft Edge和Microsoft Edge支持有关。 值得庆幸的是，将CSS与少量JavaScript功能检测和DOM操作相结合，即可轻松解决这些问题。

HTML (The HTML)

<details id="det-container">
    <summary>Mainframe</summary>
    <a href="#">Park</a>
    <a href="#">Hosts</a>
    <a href="#">Storylines</a>
    <a href="#">Recalls</a>
</details>

添加功能检测支持 (Adding support with feature detection)

Placed at the bottom of your page, the script does two things. First, it initiates a simple feature check by attempting to create a <details> element with an open attribute in the DOM. If the check fails, the script adds a no-det class to the <details> element, with user clicks on the <summary> child of this element adding and removing an open attribute:

该脚本位于页面底部，可完成两件事。 首先，它通过尝试在DOM中创建具有open属性的<details>元素来启动简单的功能检查。 如果检查失败，则脚本会在<details>元素中添加一个no-det类，用户单击该元素的<summary>子元素会添加并删除一个open属性：

function supports_details() {
	if (!('open' in document.createElement('details'))) {
		return "no-details"; }
	}
function switchOpen() {
	if (details.getAttribute('open')) {
        details.removeAttribute('open');
	} else {
        details.setAttribute('open', 'open');
	}
}
if (supports_details() == "no-details" ) {
	var details = document.getElementById("det-container");
	var summary = details.firstElementChild;
    details.classList.add("no-det");
    summary.addEventListener("click", switchOpen, false);
}
supports_details;

添加样式 (Adding style)

You can apply CSS to the details and <summary> elements in the same ways that you can to everything else. In this case, I'm using the addition of the no-det class to create an equivalent UI element for non-supporting browsers:

您可以将CSS应用于details和<summary>元素，就像对其他所有元素一样。 在这种情况下，我使用了no-det类的添加来为不支持的浏览器创建等效的UI元素：

summary, details, details a {
	display: block;
}
details.no-det summary::before { 
  content: "►";
  padding-right: 5px;
  font-size: 1.2em;
  transition: .6s linear;
  display: inline-block;
}
details.no-det[open] summary::before { 
  transform: rotate(90deg); 
}
details.no-det a {
  display: none;
}
details[open].no-det a { 
  display: block;
}

This duplicates the functionality of the <details> and <summary> elements for all browsers. I’ve added a little more CSS to the version you can see on the associated CodePen.

这将复制所有浏览器的<details>和<summary>元素的功能。 我在相关CodePen上看到的版本中添加了更多CSS。

Maksim Chemerisuk detailed the creation of a very thorough polyfill for the <details> element that takes care of edge cases and IE8.

Maksim Chemerisuk详细介绍了为<details>元素创建非常彻底的 polyfill的方法，该方法可以处理边缘情况和IE8。

翻译自: https://thenewcode.com/680/Feature-Detection-and-Styling-For-The-HTML5-details-Element