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

Question

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

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

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

这里有一些代码，我的意思是：

http://jsfiddle.net/782HX/

Answer 1

您可以使用 jQuery 轻松实现这一点。

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

这将关闭所有其他详细信息，但单击的那一项除外。

Answer 2

对于任何有兴趣的人，我找到了答案……我在这里找到了：

如果您添加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");
    }
  }