Schließen Sie automatisch alle anderen <details> Tags nach dem Öffnen einer bestimmten <details> Tag

Question

Hier ist mein Code.

<details> 
 
    <summary>1</summary> 
 
    Demo 1 
 
</details> 
 

 
<details> 
 
    <summary>2</summary> 
 
    Demo 2 
 
</details> 
 

 
<details> 
 
    <summary>3</summary> 
 
    Demo 3 
 
</details>

Was ich tun möchte, ist - wenn die Details eines einzelnen <details> Tag geöffnet ist und ich öffne/Ansicht eines anderen <details>-Tag, dann die frühere/auszublenden schließen sollte/minimieren .

Wie kann dies erreicht werden?

Ich bin mir bewusst, dass das <details>-Tag nicht in IE oder Edge unterstützt wird.

Answer 1

Ich habe eine Lösung gefunden. Bitte korrigieren Sie mich, wenn dies ein falscher Ansatz ist.

ich ein Onclick-Ereignis, um alle Detail Tag und machte eine Funktion thisindex(this) die den Index des angeklickten Tages und die erhaltenen Indexnummer, die in einer anderen Funktion closeAll() geben kehrt hinzugefügt, die minimiert wird dann/schließt all anderen geöffnete Tags außer einem, dessen Index mit dem übereinstimmt, was wir früher erhalten haben.

Hier ist der Code.

function thisindex(elm){ 
 
    var nodes = elm.parentNode.childNodes, node; 
 
    var i = 0, count = i; 
 
    while((node=nodes.item(i++)) && node!=elm) 
 
    if(node.nodeType==1) count++; 
 
    return count; 
 
} 
 

 
function closeAll(index){ 
 
    var len = document.getElementsByTagName("details").length; 
 

 
    for(var i=0; i<len; i++){ 
 
    if(i != index){ 
 
     document.getElementsByTagName("details")[i].removeAttribute("open"); 
 
    } 
 
    } 
 
}

<details onclick="closeAll(thisindex(this));"> 
 
    <summary>1</summary>Demo 1 
 
</details> 
 

 
<details onclick="closeAll(thisindex(this));"> 
 
    <summary>2</summary>Demo 2 
 
</details> 
 

 
<details onclick="closeAll(thisindex(this));"> 
 
    <summary>2</summary>Demo 3 
 
</details>

Gleiche mit Hilfe von jQuery

$(document).ready(function(){ 
    $('details').click(function (event) { 
    var index = $('details').index(this); 
    var len = $("details").length; 
    for(var i=0; i<len; i++){ 
     if(i != index){ 
     $("details")[i].removeAttribute("open"); 
     } 
    } 
    }); 
}); 

schlägt mir bitte einen besseren Ansatz, wenn dies nicht bis zur Marke.

Answer 2

Gleiches Konzept, nur ein bisschen kürzer.

$('details').click(function (event) { 
    $('details').not(this).removeAttr("open"); 
    }); 

Answer 3

Ein weiterer Ansatz, etwas kürzer, etwas effizienter, without dependencies und ohne Attribute Onclick in der HTML.

// Fetch all the details element. 
 
const details = Array.from(document.querySelectorAll("details")); 
 

 
// Add the onclick listeners. 
 
details.forEach((targetDetail) => { 
 
    targetDetail.addEventListener("click",() => { 
 
    // Close all the details that are not targetDetail. 
 
    details.forEach((detail) => { 
 
     if (detail !== targetDetail) { 
 
     detail.removeAttribute("open"); 
 
     } 
 
    }); 
 
    }); 
 
});

<details> 
 
    <summary>1</summary>Demo 1 
 
</details> 
 

 
<details> 
 
    <summary>2</summary>Demo 2 
 
</details> 
 

 
<details> 
 
    <summary>3</summary>Demo 3 
 
</details>