使用 <details> 和 <summary> 標簽可創(chuàng)建無需 JavaScript 的可訪問下拉式手風(fēng)琴效果；2. 默認內(nèi)容折疊，添加 open 屬性可默認展開；3. 可通過 CSS 自定義樣式，如邊框、背景和自定義箭頭；4. 多個 <details> 元素可組合成多面板手風(fēng)琴，默認支持多開，單開需 JavaScript 控制；5. 原生支持屏幕閱讀器和鍵盤導(dǎo)航，語義化強，無需 ARIA 即可實現(xiàn)無障礙訪問，是一種輕量、可靠且易于實現(xiàn)的解決方案。

The <details> and <summary> HTML tags provide a simple, semantic, and accessible way to create an accordion-style dropdown without any JavaScript. This is perfect for collapsible content like FAQs, settings panels, or additional info sections.

Here’s how to use them effectively:

Basic Structure of Details and Summary

The <details> tag acts as the container for the expandable content. The <summary> tag inside it becomes the clickable header that toggles the visibility.

<details>
  <summary>Click to expand</summary>
  <p>This content is hidden by default and shown when the summary is clicked.</p>
</details>

By default, the content inside <details> is collapsed. When a user clicks the <summary>, the content toggles open or closed.

Adding Default Open State

Use the open attribute if you want the section to be expanded when the page loads:

<details open>
  <summary>Section is open by default</summary>
  <p>This content is visible right away.</p>
</details>

This is useful when you want one accordion panel open initially, like a "Getting Started" section.

Styling the Accordion with CSS

While the default appearance works, you can style it to look more like a traditional accordion.

details {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  border-radius: 4px;
}

summary {
  background-color: #f5f5f5;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  list-style: none; /* Removes the default triangle if desired */
}

summary::after {
  content: " ▼";
  font-size: 0.8em;
  vertical-align: middle;
}

details[open] summary::after {
  content: " ▲";
}

details > *:not(summary) {
  padding: 10px;
}

Note: The default triangle (arrow) next to <summary> can't be removed directly with list-style: none in all browsers unless you also use display: list-item. Alternatively, use custom icons or hide the marker via generated content.

Creating a Multi-Panel Accordion

You can stack multiple <details> elements for a full accordion:

<details open>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language. It's the standard language for creating web pages.</p>
</details>

<details>
  <summary>What is CSS?</summary>
  <p>CSS controls the presentation and layout of a webpage.</p>
</details>

<details>
  <summary>What is JavaScript?</summary>
  <p>JavaScript adds interactivity to websites.</p>
</details>

Unlike some JavaScript-based accordions, all panels can be open at once unless you control it with scripts. If you want only one open at a time (like a traditional accordion), you’ll need a small amount of JavaScript.

Accessibility and Semantics

One of the biggest advantages of <details> and <summary> is that they are natively accessible:

• Screen readers recognize the toggle behavior.
• Keyboard navigation works out of the box (users can press Enter or Space to open/close).
• No ARIA roles are required, though you can enhance them if needed.

Avoid wrapping interactive elements (like buttons or links) inside <summary> unless necessary, as it can interfere with accessibility.

Basically, <details> and <summary> give you a lightweight, accessible accordion with zero JavaScript. It’s not as flexible as a JS version, but for simple use cases, it’s fast, reliable, and easy to implement.

? ??? HTML ????? ?? ?? ? ?? ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!