打开特定的<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>标签，然后较早的企业之一应该关闭/隐藏/最小化。

这是如何实现的？

我知道IE或Edge不支持<details>标记。

Answer 1

我想出了一个解决方案。如果这是一个错误的方法，请纠正我。

我加入onClick事件的所有细节标签的，并提出了功能thisindex(this)它返回所点击的标签和所获得的索引号的索引随后被传递到另一个功能closeAll()，其最小化/关闭所有其他打开的标签除了索引与我们之前获得的索引相匹配的索引。

这是代码。

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>

用相同的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"); 
     } 
    } 
    }); 
}); 

帮助请建议我一个更好的方法，如果这没有达到标准。

Answer 2

相同的概念，只是短一点。

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

Answer 3

的另一种方法，略短，会更有效，without dependencies，没有的onclick在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>