以前，創(chuàng)建簡(jiǎn)單的可擴(kuò)展內(nèi)容塊需要JavaScript或複雜的CSS解決方法。修改HTML也可能變得笨拙?，F(xiàn)在，<details></details>和<summary></summary>元素（形成“披露小部件”）大大簡(jiǎn)化了這一點(diǎn)。例如，我們?cè)诠ぷ髦袕V泛使用它們來(lái)進(jìn)行常見(jiàn)問(wèn)題解答。

應(yīng)對(duì)常見(jiàn)的造型挑戰(zhàn)

儘管<details></details>和<summary></summary>固有地提供擴(kuò)展/倒塌功能，您可能仍然需要CSS才能進(jìn)行最佳呈現(xiàn)。沒(méi)有樣式，出現(xiàn)了兩個(gè)關(guān)鍵問(wèn)題：

第1期：<summary></summary>游標(biāo)

這<summary></summary>元素雖然交互式默認(rèn)為文本選擇光標(biāo)，而不是預(yù)期的指針。

問(wèn)題2：嵌套的塊元素<summary></summary>

嵌套塊級(jí)元素（如標(biāo)題）<summary></summary>使它們出現(xiàn)在箭頭下方，而不是內(nèi)聯(lián)。

CSS解決方案

要解決這些問(wèn)題，請(qǐng)將這些樣式添加到您的CSS重置中：

詳細(xì)信息摘要{
  光標(biāo)：指針；
}

詳細(xì)信息摘要> * {
  顯示：內(nèi)聯(lián)；
}

讓我們?cè)敿?xì)檢查每個(gè)問(wèn)題及其解決方案。

自定義<summary></summary>游標(biāo)

光標(biāo)應(yīng)在視覺(jué)上反映其預(yù)期的相互作用。默認(rèn)文本光標(biāo)<summary></summary>元素在技術(shù)上正確（可選文本），但不如指針直觀。

解決方案很簡(jiǎn)單：

詳細(xì)信息摘要{
  光標(biāo)：指針；
}

許多著名的網(wǎng)站，包括MDN Web文檔和GitHub，已經(jīng)採(cǎi)用了這種風(fēng)格來(lái)披露小部件。默認(rèn)cursor: text可能反映了摘要文本的可選性，但是對(duì)於交互式元素，指針通常比較可取。請(qǐng)注意，更改光標(biāo)只會(huì)影響視覺(jué)外觀。選擇性保持不變。

顯示嵌套<summary></summary>內(nèi)容內(nèi)聯(lián)

對(duì)於常見(jiàn)問(wèn)題解答，我經(jīng)常將問(wèn)題包裹在標(biāo)題中（例如，<h3></h3> ） 之內(nèi)<summary></summary>：

<details><summary><h3>我孩子的504計(jì)劃會(huì)實(shí)施嗎？</h3></summary><p>是的。與春季類(lèi)似，案例經(jīng)理將與學(xué)生聯(lián)繫。</p></details>

這提供了幾個(gè)優(yōu)勢(shì)：

• 一致的樣式：與其他標(biāo)題保持視覺(jué)一致性。
• IE/EdgeHTML兼容性：為不支持的舊瀏覽器提供後備<details></details>。
• 可訪問(wèn)性： AIDS輔助技術(shù)導(dǎo)航（儘管屏幕讀取器的解釋可能會(huì)有所不同，如下所述）。

標(biāo)題與按鈕

這<summary></summary>元素的行為就像一個(gè)按鈕（它隱式具有role=button ），但與按鈕不同，它允許嵌套標(biāo)題。這造成了衝突：

• 標(biāo)題輔助導(dǎo)航。
• 按鈕通常會(huì)從嵌套元素中剝離語(yǔ)義。

屏幕閱讀器的兼容性在這裡不一致。 NVDA和配音識(shí)別內(nèi)部的標(biāo)題<summary></summary>，但是下巴沒(méi)有。因此，在內(nèi)部樣式的同時(shí)<summary></summary>可能的是，他們的語(yǔ)義解釋不能保證。

內(nèi)聯(lián)樣式

為防止箭頭出現(xiàn)在標(biāo)題上方<summary></summary>：

詳細(xì)信息摘要> * {
  顯示：內(nèi)聯(lián)；
}

使用inline ，而不是inline-block ，以避免包裝問(wèn)題。在誘人使用display: flex on<summary></summary> ，這隱藏了箭頭。

獎(jiǎng)金：不包括Internet Explorer樣式

由於IE和較舊的邊緣版本不支持<details></details>，避免使用功能查詢(xún)對(duì)它們應(yīng)用自定義樣式：

 @supports而不是（-ms-ime-align：auto）{
  詳細(xì)信息摘要{
    光標(biāo)：指針；
  }
  詳細(xì)信息摘要> * {
    顯示：內(nèi)聯(lián)；
  }
  /* 其他<details>/<summary> 樣式 */
}</summary></details>

IE完全忽略了這個(gè)塊。由於-ms-ime-align檢查，Edgehtml也忽略了它。請(qǐng)注意，非常古老的Chrome和Safari版本（具有微不足道的市場(chǎng)份額）也缺乏功能查詢(xún)支持。 @supports (details)塊是理想的選擇，但瀏覽器支持更少。

結(jié)論

使用正確的HTML結(jié)構(gòu)和這些CSS樣式，您可以輕鬆自定義披露小部件。記住造型時(shí)<summary></summary>元素很簡(jiǎn)單，嵌套標(biāo)題的屏幕閱讀器兼容性需要考慮。

以上是兩個(gè)問(wèn)題造型細(xì)節(jié)元素以及如何解決這些元素的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！