<details>一个接一个用快捷方式打开

Question

我试着设置按a键顺序打开，结果是同时打开。

预期结果：

“a”键 = 打开详细信息1
“a”键 = 打开详细信息2
“a”键 = 打开详细信息3

document.onkeyup = function(e) {
    var e = e || window.event;
    if (e.which == 65) {
        $('details').attr('open', true);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details>
    <summary>Details1</summary>
    test1
    
    <details>
        <summary>Details2</summary>
    test2
    
        <details>
            <summary>Details3</summary>
    test3

        </details>
    </details>
</details>

Answer 1

这样
有关信息，详细信息元素与 toggle event
一起使用他们的 open 属性类型是 Boolean.

For more explanation please referto my answer there

// array of details elements in hierarchical order
const details_tree = [...document.querySelectorAll('body>details, body>details>details, body>details>details>details')] 

document.onkeydown=e=>
  {
  if (e.key==='a')                   // open part 
  for (let D of details_tree)       // loop to find  
  if (!D.open)                     // the first closed (not open)
    {
    D.open = true                 // open it
    break                        // break the loop
    }
  if (e.key==='b')                       // close part
  for (let i=details_tree.length;i--;)  // reverse loop to find  
  if (details_tree[i].open)            // the last open 
    {
    details_tree[i].open = false      // close it
    break                            // break the loop 
    }
  }
 
// option : when closing a <detail> element, sub <details> will be closed too
details_tree.forEach((D,index,A)=>{
  D.ontoggle =_=>{ if(!D.open) A.forEach((d,i)=>{ if(i>index) d.open=false })}
})

details {
  margin  : .5em;
  border  : 1px solid lightgrey;
  padding : .4em;
}

<details>
  <summary>Details1</summary>
  test1
  <details>
    <summary>Details2</summary>
    test2
    <details>
      <summary>Details3</summary>
      test3
    </details>
  </details>
</details>

Answer 2

JQuery returns 匹配查询的元素集合，并调用集合上的方法对每个成员执行该方法 - 它们同时打开的原因。

要一次打开 details 个，您可以遍历集合并打开第一个未打开的。
要关闭最后一个打开的元素，您可以从 details 集合创建一个数组，反转数组，从数组创建一个新集合，找到反转集合中第一个打开的元素并关闭它（呸）。
要关闭所有打开的元素，只需从整个 details 集合中删除 open 属性。

请注意，open 是一个没有值的属性 - 如果属性存在，则 details 元素打开，如果不存在，则关闭。

不幸的是 jQuery 没有“hasAttribute”函数，虽然已经设计了变通方法，但其中许多不适用于没有值的属性。然而，原生 hasAttribute 元素方法比 <details> 元素存在时间更长，并且在所有现代浏览器中都受支持。

所以使用 jQuery（大部分）您可以尝试以下操作。键入 'a' 打开单个元素，'c' 关闭最后一个打开的元素，或 'z' 关闭所有打开的（详细信息）元素：

document.onkeyup = function(e) {
    var e = e || window.event;
    if (e.which == 65) {        // 'a' - open one
        $('details').each( function() {
            if( this.hasAttribute("open")) {
                return true;
            }
            $(this).attr("open", true);
            return false;   
        });
    }
    else if(e.which == 67) {    // 'c' - close one
       $($('details').get().reverse()).each( function() {
            if( this.hasAttribute("open")) {
                $(this).removeAttr("open");
                return false;
            }  
        });
    }
    else if(e.which == 90) {    // 'z' - close all
        $('details').removeAttr('open');
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details>
    <summary>Details1</summary>
    test1
    
    <details>
        <summary>Details2</summary>
    test2
    
        <details>
            <summary>Details3</summary>
    test3

        </details>
    </details>
</details>

<details>一个接一个用快捷方式打开

<details> opens one after another with a shortcut

javascript

jquery

details-tag

summary-tag