<details>タグを開いたあと、他のすべての<details>タグを自動的に閉じる

Question

ここに私のコードです。

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

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

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

私は何をしたいです - の詳細は、任意の単一<details>のタグが開いていると私は/別の<details>タグを表示開く場合、以前の一つは最小限に/ /非表示閉じる必要があります。

これはどのように達成できますか？

<details>タグはIEまたはEdgeではサポートされていません。

Answer 1

私は解決策を考え出しました。これが間違った方法であれば私を修正してください。

私は詳細タグの全てへのonclickイベントを追加した後に渡され、クリックタグ、得られたインデックス番号のインデックスを返す関数thisindex(this)した/最小化する他の機能closeAll()は、他のすべての開いているタグを閉じます私たちが以前に得たものと一致するものを除きます。

ここにコードがあります。 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"); 
     } 
    } 
    }); 
}); 

の助けを借りて、同じ

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>

この場合は親切ではないマークまで私はより良いアプローチを示唆しています。

Answer 2

同じ概念ですが、少し短くなりました。

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

Answer 3

別のアプローチ、若干短く、もう少し効率的、without dependencies、およびHTMLでのonclick属性なし。

// 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>