自动关闭所有其他<详情>标签打开特定的<细节>标签 [英] Automatically close all the other <details> tags after opening a specific <details> tag

问题描述

这是我的代码。

< details> <总结> 1·/总结>演示1< / details><详情> <总结> 2'; /总结>演示2< /详细><详细> <总结> 3'; /总结> Demo 3< / detail>

- 如果任何一个< details> 标记的详细信息已打开并且我打开/查看另一个< details> 标签，那么较早的应该关闭/隐藏/最小化。

这怎么能实现？

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

解决方案

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

我为所有细节标记添加了一个onclick事件，并且创建了一个函数 thisindex（this） 它返回clicked标签的索引，然后将获得的索引号传递给另一个函数 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）}}}

p>在 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）[ （打开）; 
} 
} 
}）; 
}）; 
  

请告诉我一个更好的方法，如果这不符合标准的话。

Here is my code.

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

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

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

What I want to do is -- if the details of any single <details> tag is open and I open/view another <details> tag, then the earlier one should close/hide/minimize.

How can this be achieved?

I'm aware the <details> tag is not supported in IE or Edge.

解决方案

I have come up with a solution. Please correct me if this is a wrong approach.

I added an onclick event to all of the details tag and made a function thisindex(this) which returns the index of the clicked tag and the obtained index number is then passed to the another function closeAll() which minimizes/closes all the other open tags except for one whose index matches with what we obtained earlier.

Here is the code.

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>

Same with the help of 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");
      }
    }
  });
});

Kindly suggest me a better approach if this not up to the mark.

这篇关于自动关闭所有其他&lt;详情&gt;标签打开特定的&lt;细节&gt;标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！