IE 中的 HTML 摘要標簽

Question

有沒有辦法在 Internet Explorer（版本 11）（例如外部庫）中使用摘要標簽。

    <details>
    <summary>This is a summary.</summary>
    <p>bla bla bla</p>
    </details>    

提前致謝。

Answer 1

你必須讓它們自己工作，因為 IE 不支持它們。

您可以像這樣檢測details / summary ：

if (typeof HTMLDetailsElement === "undefined") {
    // No, not intrinsically supported
}

如果它們本質上不受支持，為了給它們設置樣式，您需要告訴 IE 它們存在，您可以通過簡單地創建和丟棄它們來實現：

document.createElement("details");
document.createElement("summary");

然后（同樣只有在沒有內在支持的情況下）為它們添加一些樣式：

// JUST A ROUGH SKETCH
var style = document.createElement("style");
style.textContent = 
    "details > :not(summary) {\n" +
    "    display: none;\n" +
    "}\n" +
    "details.showing > :not(summary) {\n" +
    "    display: block;\n" +
    "}\n";
document.querySelector("head").appendChild(style);

當然，並非所有details元素通常都有display: block ，因此您必須對其進行調整。 （例如，您可能對所有非summary內容使用div 。）您可能還想在左側添加一個箭頭或其他內容，以便類似於 Chrome 和 Firefox 呈現這些內容的方式。

通常，您會希望執行上述操作的代碼位於body元素之前，以避免出現無樣式的內容。

然后通過切換樣式定義的showing類來響應對details元素的點擊和空間/輸入按鍵：

// AGAIN: THIS IS A ROUGH SKETCH
document.addEventListener("click", detailsHandler);
document.addEventListener("keypress", detailsHandler);
function detailsHandler(e) {
    if (e.type === "keypress" && [13, 32].indexOf(e.which || e.keyCode) === -1) {
        return;
    }
    var el = e.target;
    while (el && el.tagName !== "DETAILS") {
        if (el.tagName === "BODY") {
            el = null;
            break;
        }
        el = el.parentNode;
    }
    if (el) {
        el.classList.toggle("showing");
    }
}

此代碼不必在body之前，它可以在您的正常位置。 但由於它在概念上是初始位的一部分，所以把它放在那里可能是有意義的。

然后確保在details和summary上都使用tabindex="0" ，以便 IE 將它們包含在 Tab 鍵順序中：

<details tabindex="0">
<summary tabindex="0">This is a summary.</summary>
<p>bla bla bla</p>
</details> 

現場示例：

 <!-- In the head element --> <script> (function() { if (typeof HTMLDetailsElement === "undefined") { // Tell IE they exist document.createElement("details"); document.createElement("summary"); document.addEventListener("click", detailsHandler); document.addEventListener("keypress", detailsHandler); var style = document.createElement("style"); style.textContent = "details > :not(summary) {\\n" + " display: none;\\n" + "}\\n" + "details.showing > :not(summary) {\\n" + " display: block;\\n" + "}\\n"; document.querySelector("head").appendChild(style); } function detailsHandler(e) { if (e.type === "keypress" && [13, 32].indexOf(e.which || e.keyCode) === -1) { return; } var el = e.target; while (el && el.tagName !== "DETAILS") { if (el.tagName === "BODY") { el = null; break; } el = el.parentNode; } if (el) { el.classList.toggle("showing"); } } })(); </script> <!-- End of in the head element --> <!-- In body --> <details tabindex="0"> <summary tabindex="0">This is a summary.</summary> <p>bla bla bla</p> </details>

Answer 2

如前所述，IE11不支持匯總/明細。 對於那些剛剛發現這一點，這里有一些polyfills你可以嘗試使用，以支持IE11：

• https://github.com/javan/details-element-polyfill
• https://github.com/mathiasbynens/jquery-details