details 標簽用于創(chuàng)建可折疊內(nèi)容塊，默認折疊，需配合 summary 標簽使用。1. 可通過 css 自定義樣式，如修改指示器、背景顏色等；2. 使用 open 屬性控制初始狀態(tài)，存在則默認展開；3. 可結(jié)合 JavaScript 實現(xiàn)動態(tài)展開與折疊；4. 常見應用場景包括 faq 頁面、文章摘要、表單選項和代碼示例展示。
details 標簽在 html 中用于創(chuàng)建一個可折疊的內(nèi)容塊，默認情況下是折疊的，用戶可以通過點擊展開查看詳細信息。它提供了一種簡單的方式來隱藏或顯示頁面上的額外內(nèi)容，從而提高頁面的可讀性和用戶體驗。
使用 details 標簽，你需要配合使用
<details> <summary>點擊展開查看更多信息</summary> <p>這里是詳細信息的內(nèi)容，可以包含任何 HTML 元素，比如段落、列表、圖片等等。</p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p> </details>
如何自定義 details 標簽的樣式？
details 標簽本身提供了一些默認樣式，但你可以使用 css 來完全自定義它的外觀。例如，你可以修改展開/折疊指示器的樣式，或者改變背景顏色、字體等等。
一種常見的做法是修改展開/折疊指示器（通常是一個小三角形）。你可以使用 summary::-webkit-details-marker 來針對 WebKit 瀏覽器（chrome, safari）修改這個指示器。
details > summary { list-style: none; /* 移除默認的指示器 */ } details > summary::before { content: '?'; /* 使用 Unicode 字符作為指示器 */ display: inline-block; margin-right: 5px; transition: transform 0.2s ease-in-out; /* 添加過渡效果 */ } details[open] > summary::before { transform: rotate(90deg); /* 展開時旋轉(zhuǎn)指示器 */ } summary { cursor: pointer; /* 鼠標懸停時顯示手型 */ }
注意，不同瀏覽器對 details 標簽的默認樣式可能略有不同，因此最好進行一些跨瀏覽器的測試。
details 標簽的 open 屬性有什么用？
details 標簽有一個 open 屬性，用于控制內(nèi)容塊的初始狀態(tài)。如果 open 屬性存在，則內(nèi)容塊默認是展開的；如果不存在，則默認是折疊的。
你可以通過 JavaScript 來動態(tài)控制 open 屬性，從而實現(xiàn)更復雜的交互效果。例如，你可以添加一個按鈕，點擊按鈕來展開或折疊 details 標簽。
<details id="myDetails"> <summary>點擊展開</summary> <p>更多內(nèi)容...</p> </details> <button onclick="toggleDetails()">展開/折疊</button> <script> function toggleDetails() { const details = document.getElementById('myDetails'); details.open = !details.open; } </script>
這個例子展示了如何通過 JavaScript 來切換 details 標簽的 open 屬性，從而實現(xiàn)展開和折疊的切換。
details 標簽在實際項目中有什么應用場景？
details 標簽在很多場景下都非常有用，比如：
- FAQ 頁面：可以使用 details 標簽來展示常見問題及其答案，用戶可以根據(jù)需要展開查看。
- 文章摘要：在文章列表中，可以使用 details 標簽來展示文章摘要，用戶點擊展開查看完整內(nèi)容。
- 表單選項：在表單中，可以使用 details 標簽來隱藏一些不常用的選項，從而簡化表單界面。
- 代碼示例：在技術(shù)文檔中，可以使用 details 標簽來展示代碼示例，用戶可以點擊展開查看完整代碼。
總之，details 標簽提供了一種簡單而有效的方式來組織和展示頁面上的內(nèi)容，可以顯著提高用戶體驗。它本身很簡單，但結(jié)合 CSS 和 JavaScript，可以實現(xiàn)非常靈活和強大的功能。
