<details></details>
和<summary></summary>
元素創建可折疊的內容HTML5 <details></details>
和<summary></summary>
元素提供了一種簡單而語義的方法來創建可折疊內容。 <details></details>
元素充當可折疊內容的容器,而<summary></summary>
元素提供標題或標籤,當單擊時,在<details></details>
元素中切換內容的可見性。
這是其工作原理:
<summary></summary>
:此元素是在<details></details>
元素中需要的,並且是顯示或隱藏內容的控制。 <summary></summary>
元素的文本內容顯示為可折疊部分的標題或標籤。<details></details>
:此元素包含<summary></summary>
元素和您想要折疊的所有內容。當頁面加載時,默認情況下最初隱藏了<details></details>
元素中的內容。單擊<summary></summary>
元素可切換內容的可見性。例子:
<code class="html"><details> <summary>Click to Expand</summary> <p>This is the collapsible content. You can include any HTML content here, such as paragraphs, images, lists, etc.</p> </details></code>
在此示例中,單擊“單擊以展開”將顯示文本段落。再次單擊它將折疊內容。瀏覽器會自動處理可見性的切換。基本功能不需要JavaScript。
<details></details>
和<summary></summary>
元素您可以使用CSS充分自定義<details></details>
和<summary></summary>
元素的外觀。這使您可以將可折疊內容與整體網站設計匹配。您可以為<summary></summary>
元素進行樣式,以更改切換的外觀,並且可以為<details></details>
元素設計樣式,以控制內容時的外觀。
例子:
<code class="css">details { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; } summary { cursor: pointer; background-color: #f0f0f0; padding: 5px; margin-bottom: 5px; } details[open] summary { /* Style when open */ background-color: #ddd; } details[open] { /* Style the details when open */ border-color: #aaa; }</code>
此CSS將邊框和填充添加到<details></details>
元素,樣式的<summary></summary>
元素帶有背景顏色和填充物,並在打開<details></details>
元素時添加了不同的樣式(使用[open]
屬性selector)。您可以調整這些樣式以適合您網站的設計。請記住,在樣式時要注意可訪問性,確保足夠的對比度和清晰的視覺指示器。
<details></details>
和<summary></summary>
時可訪問性注意事項<details></details>
和<summary></summary>
提供了一種語義和可訪問的方式來創建可折疊內容,但有一些可訪問性注意事項:
aria-label
添加到<summary></summary>
元素中可以提供其他上下文。<summary></summary>
中使用圖標,請為屏幕閱讀器提供適當的替代文本。<details></details>
和<summary></summary>
通常, <details></details>
和<summary></summary>
具有良好的瀏覽器支持。但是,較舊的瀏覽器可能無法正確渲染它們。對於較舊的瀏覽器,您可能需要JavaScript Polyfill或後備機制。現代瀏覽器(Chrome,Firefox,Safari,Edge)本地支持這些元素,而無需除基本HTML和CSS之外的其他工作。始終在各種瀏覽器和輔助技術中測試您的實現,以確保行為和可訪問性一致。考慮使用Caniuse.com這樣的工具來檢查不同瀏覽器版本的這些元素的支持。
以上是我如何使用html5&lt;詳細信息&gt; 和&lt;摘要&gt; 創建可折疊內容的元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!