html details_使用HTML5 details元素创建站点手风琴菜单

html details

Historically, many different technologies have been used to create accordion menus and “show more” interfaces on web pages. HTML tosses its hat into the ring with the details and <summary> elements. At their simplest, the new tags look something like this:

从历史上看，已经使用了许多不同的技术来创建手风琴菜单和在网页上“显示更多”界面。 HTML将details和<summary>元素扔进了戒指。 简单来说，新标签如下所示：

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

By default, only the immediate <summary> content is displayed on the page, with the rest of the information hidden. A browser that supports both elements should produce a UI widget beside the <summary> element; activating the interface will reveal the entire content. That activation will also set an open attribute on the <details> element.

默认情况下，页面上仅显示直接<summary>内容，其余信息被隐藏。 同时支持这两个元素的浏览器应在<summary>元素旁边生成一个UI小部件； 激活界面将显示全部内容。 该激活还将在<details>元素上设置一个open 属性 。

Like much of modern HTML and CSS, <details> potentially replaces big chunks of traditional JavaScript or JQuery. There’s just one browser that doesn’t support the element at this time (Microsoft Edge) although coding support for it isn’t too challenging.

像许多现代HTML和CSS一样 ， <details>可能取代了传统JavaScript或JQuery的大部分。 目前只有一种浏览器不支持该元素(Microsoft Edge)，尽管对其进行编码支持也不太困难 。

浏览器中不同的外观和CSS (Different appearance and CSS in browsers)

Inevitably new elements are rendered slightly differently in browsers; only time and familiarity breeds a standard look and feel. Right now, Chrome places a strong outline around summary text in an expanded detail element. It is recommended that this outline not be removed: it’s there for accessibility.

不可避免的是，新元素在浏览器中的呈现方式略有不同。 只有时间和熟悉才能孕育出标准的外观。 现在，Chrome在展开的详细信息元素中围绕摘要文本添加了一个强烈的轮廓。 建议不要删除此轮廓：它在那里可访问 。

验证者的警告 (Warnings From The Validator)

The W3C validator will currently flag the use of <details> in your code. That doesn’t mean that the code won’t work or that it’s wrong, just that the W3C is suggesting that you show caution when using the element in production.

W3C验证器当前将标记代码中<details>的使用。 这并不意味着代码将不起作用或不正确，只是W3C建议您在生产中使用该元素时要格外小心。

Next, I’ll show you how to wire in compatibility with browsers that don’t yet support <details> and <summary>, and how to customize their appearance.

接下来，我将向您展示如何与尚未支持<details>和<summary>浏览器兼容 ，以及如何自定义其外观。

翻译自: https://thenewcode.com/679/Create-Site-Accordion-Menus-With-The-HTML5-details-Element

html details