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

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

不期望的效果:

我创建了一个 fiddle http://jsfiddle.net/877tm/与所有的代码。 javascript 在那里工作，如果您想实时查看它，请单击 here .

Answer 1

既然你标记了 jQuery，你就可以这样做:

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

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

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