1

我尝试在按“a”键按顺序打开时进行设置，但它同时打开。

预期结果：

  1. “a”键 = 打开详细信息1
  2. “a”键=打开详细信息2
  3. “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>

4

2 回答 2

2

这种方式
对于信息， details 元素与toggle 事件
一起使用 ，它们的open属性类型是Boolean。

更多解释请参考我的回答

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

于 2021-03-29T03:52:58.627 回答
2

JQuery 返回与查询匹配的元素集合，并在集合上调用方法对每个成员执行该方法——这就是它们同时打开的原因。

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

请注意，这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>

于 2021-03-29T07:30:39.347 回答