Chiudi automaticamente tutti gli altri tag <details> dopo aver aperto un tag specifico <details>

Question

Ecco il mio codice.

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

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

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

Quello che voglio fare è - se i dettagli di ogni singolo <details> tag è aperto e mi si aprono/Vedi altre <details> tag, poi quella precedente dovrebbe chiudere/nascondere/minimizzare .

Come può essere raggiunto?

Sono consapevole che il tag <details> non è supportato in IE o Edge.

Answer 1

Ho trovato una soluzione. Per favore correggimi se questo è un approccio sbagliato.

ho aggiunto un evento onclick a tutto il tag particolari e fece una funzione thisindex(this) che restituisce l'indice del tag cliccato e il numero di indice ottenuto viene poi passato alla un'altra funzione closeAll() che riduce al minimo/chiude tutti gli altri tag aperti tranne uno il cui indice corrisponde a quello che abbiamo ottenuto in precedenza.

Ecco il codice.

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>

Lo stesso con l'aiuto di 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"); 
     } 
    } 
    }); 
}); 

Gentilmente mi suggeriscono un approccio migliore, se questo non all'altezza del marchio.

Answer 2

Stesso concetto, solo un po 'più breve.

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

Answer 3

Un altro approccio, leggermente più corta, leggermente più efficiente, without dependencies, e senza onclick attributi nel codice 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>