Javascript 自动关闭所有其他窗口<；细节>；打开特定文件后的标签<；细节>；标签

这是我的密码

1.
演示1
2.
演示2
3.
演示3

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

我在所有细节标记中添加了一个onclick事件，并创建了一个函数

thisindex（this）

，该函数返回单击标记的索引，然后将获得的索引号传递给另一个函数

closeAll（）

它最小化/关闭所有其他打开的标记，除了索引与我们之前获得的匹配的标记

这是代码

函数thisindex（elm）{
var nodes=elm.parentNode.childNodes，节点；
变量i=0，计数=i；
while（（node=nodes.item（i++）&&node！=elm）
if（node.nodeType==1）count++；
返回计数；
}
函数closeAll（索引）{
var len=document.getElementsByTagName（“详细信息”）.length；
对于（var i=0；i相同的概念，只是稍微短一点

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

另一种方法，稍微短一点，稍微高效一点，并且在HTML中没有onclick属性


//获取所有细节元素。
const details=document.queryselectoral（“细节”）；
//添加onclick侦听器。
details.forEach（（targetdetails）=>{
targetDetail.addEventListener（“单击”，（）=>{
//关闭所有不是targetDetail的详细信息。
详细信息。forEach（（详细信息）=>{
如果（细节！==目标细节）{
详细信息。删除属性（“打开”）；
}
});
});
})；

1表情1
2表情2
3Demo 3
用于polyfill jquery-details.js[Edge]的修改

  var isIE = /*@cc_on!@*/false || !!document.documentMode;
  var isEdge = !isIE && !!window.StyleMedia;
  const details = Array.from(document.querySelectorAll("details"));
  details.forEach((targetDetail) => {
    targetDetail.addEventListener("click", () => {
      details.forEach((detail) => {
        if (detail !== targetDetail) {
          if(isEdge) {
            detail.className = detail.className.replace(/\bopen\b/g,"");
            detail.open =  false;
            detail.querySelector("summary").setAttribute("aria-expanded","false");
            var chil = detail.querySelectorAll("details > *");
            for(var j = 0; j < chil.length; j++) {
              if(chil[j].tagName != "SUMMARY") {
                chil[j].style.display = "none";
              }
            }
          } else {
            detail.removeAttribute("open");
          }
        }
      });
    });
  });**strong text**

var isIE=/*@cc_on！@*/false | |！！document.documentMode；
var isEdge=！isIE&&！！window.StyleMedia；
const details=Array.from（document.queryselectoral（“details”）；
details.forEach（（targetdetails）=>{
targetDetail.addEventListener（“单击”，（）=>{
详细信息。forEach（（详细信息）=>{
如果（细节！==目标细节）{
如果（iEdge）{
detail.className=detail.className.replace（/\bopen\b/g，“”）；
detail.open=false；
detail.querySelector（“summary”）.setAttribute（“aria展开”、“false”）；
var chil=detail.queryselectoral（“details>*”）；
对于（var j=0；j
哇！在我发帖之前

没有人指出
元素与
切换事件一起工作？

--不要单击
，而是单击


--而
切换
事件也适用于键盘交互


没有人指出
open
属性是一个布尔值，

将其设置为
true
或
false
，不要执行
。请删除设置（“打开”）
；）


文件:
const All_Details=document.queryselectoral（'Details'）；
所有详细信息。forEach（deet=>{
deet.addEventListener（'toggle'，toggleOpenOneOnly）
})
功能切换仅限OpenOneOnly（e）{
如果（这个打开）{
所有详细信息。forEach（deet=>{
如果（deet！=this&&deet.open）deet.open=false
});
}
}

1.
演示1
2.
演示2
3.
演示3
对于那些不想使用和喜欢函数式javascript的人来说，这是另一个答案


[…document.getElementsByTagName（“详细信息”）].forEach（（D，A）=>
D.addEventListener（“切换”，E=>
D.open&A.forEach（D=>
d！=E.target&（d.open=false）
)
)
)

1表情1
2表情2
3Demo 3
迟做总比不做好。。。
我想指出这句话

注意：必须完全删除此属性才能隐藏详细信息。open=“false”使详细信息可见，因为此属性是布尔属性

（阅读属性段落末尾右侧的注释。）

显然，在这种情况下，布尔值表示存在或不存在，且不可设置为真或假

浏览器魔术更进一步！
到目前为止您尝试了什么？问题很好，但验证选择错误？：\
标记有一个名为
打开的属性。如果给定了该属性，则详细信息标记已经打开。因此在本例中，我使用javascript简单地删除该属性以关闭标记。感谢您的解决方案！我“我不是javascript大师，但是否有一种方法可以针对atribute open？这似乎更复杂，你找到了一个更简单的解决方案吗？我已经尝试过了，而且效果很好。我只是问是否有一种更简单的方法
document.queryselectoral（“详细信息[打开]”）
将选择当前打开的所有
详细信息
标记。通常，在这种情况下，所有
都是同级标记，因此我们可以这样做：
$（'details'）。在（'click'，函数（事件）{$（this）.同级标记（'details'）。removeAttr（'open'）；}）
可能不是最快的，但绝对是可读性很好的代码！+1表示
open
属性，而不是
removeAttribute（“open”）
（这会将
open
设置为false作为副作用），也投票支持无库javascript和切换事件。我建议
getElementsByTagName
而不是较慢的
querySelectorAll
，并清理我在此基础上解决的全局范围。我喜欢过时的jQuery链接；）侦听“单击”不会检测到键盘交互。请使用MutationObserver instad.@geek merlin我相信是的。我不知道它是否符合规范，但据我所知，它在FF、Safari和Chrome上都能工作。@Quentin Roy你是对的。浏览器的魔力在继续。相反：
.setAttribute（“open”，true）
@geek merlin切换事件也适用于键盘交互