html5详细信息标签一一打开javascript函数工作奇怪

Question

我将 HTML5 标记详细信息用于公司的常见问题解答部分。一个问题是，如果用户打开另一个问题，另一个问题不会自动关闭。因此我在网上搜索并找到了以下解决方案：

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

这段代码在某种意义上确实可以正常工作，但它有一些小问题。有时它会同时打开两个问题并且很有趣。有没有一种方法可以正常工作？这应该适用于台式机、平板电脑和移动设备。

不想要的效果：

我用所有代码创建了一个小提琴http://jsfiddle.net/877tm/。javascript 正在那里工作，如果您想实时查看它，请单击此处。

Answer 1

由于您标记了 jQuery，您可以这样做：

$('.info').on('click', 'details', function () {
    $('details').removeAttr('open');
    $(this).attr('open', '');
});

所有这open一切都是detail在您单击 any 时删除所有标签的属性detail，然后重新打开您刚刚单击的那个。

http://jsfiddle.net/877tm/3/