如果打开另一个细节HTML5元素，则关闭详细信息

Question

我正在使用detail的新HTML5元素和摘要。这是一个FAQ部分，所以有几个问题。它工作正常，但我需要一个额外的功能......如果用户打开第二个细节元素，第一个细节元素保持打开状态，这可能会令人不安。一旦打开，我想让这个细节关闭。

我也怀疑这是否用户友好？

这里有一张图片，说明了我的意思，并希望避免这种情况。

在这里，您可以根据我的意思找到一些代码：

http://jsfiddle.net/782HX/

Answer 1

您可以使用jQuery轻松实现此目的。

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

这将关闭除了单击的所有细节之外的所有其他细节。

Answer 2

对于任何有兴趣的人我都找到了答案......我找到了here：

如果您为每个细节添加onclick="closeAll(thisindex(this));"并添加此javascript，则会在打开其他详细信息时关闭打开的详细信息。希望它有所帮助！

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");
    }
  }