标签: html-tag-summary

我已经检查过这个问题。没有答案，这个问题也是如此。但我的问题在这里略有不同。我只是在 中添加另一个元素summary，然后单击该元素而不打开details. 当我点击外部label即仅在summary其上有效。

这是我的代码：

<form action="#" id="">
        <details>
            <summary>
                <label>Filter 1</label>
            </summary>
            <div class="filter-1">
                <input type="checkbox" name="filter-1" value="a">A <br>
                <input type="checkbox" name="filter-1" value="b">B
            </div>
        </details>
    </form>

我基本上试图在details-summary标签中显示或隐藏一些输入。

注意：- 类和名称属性就在那里。没有相关的代码。

预期解决方案：

单击摘要标签内的任何内容将打开详细信息。提前致谢

我将 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 正在那里工作，如果您想实时查看它，请单击此处。