标签: html-tag-details

我想使用详细信息标签来隐藏和展开表中的整行，所以我目前有代码

           <table border="1">
                <tr>
                    <td>Header 1 </td>
                    <td>Header 2 </td>
                    <td>Header 3 </td>
                </tr>

                <tr>
                    <td>Content 1 </td>
                    <td>Content 2 </td>
                    <td>Content 3 </td>
                </tr>

                <details>
                    <tr>
                        <td>Hidden Content 1 </td>
                        <td>Hidden Content 2 </td>
                        <td>Hidden Content 3 </td>
                    </tr>
                </details>
            </table>

展开详细信息标签时，它会生成“隐藏”行，但在一列中，而不是原始表中的整个 3 列。我也尝试过将标签放在行内，但遇到了同样的问题

                    <tr><details>
                        <td>Hidden Content 1 </td>
                        <td>Hidden Content 2 </td>
                        <td>Hidden Content 3 </td>
                        </details>
                    </tr>

有没有人也遇到过这个问题并设法解决它？

下面的代码几乎可以达到目的。如果您打开任何详细信息标签，然后单击其外部的任何位置，它将关闭。但是，当新的详细信息标签打开时，当前打开的详细信息标签不会关闭。

var details = [...document.querySelectorAll('details')];
document.addEventListener('click', function(e) {
  if (!details.some(f => f.contains(e.target))) {
    details.forEach(f => f.removeAttribute('open'));
  }
})

<details>
  <summary>Details 1</summary>
  <p>content</p>
</details>

<details>
  <summary>Details 2</summary>
  <p>content</p>
</details>

<details>
  <summary>Details 3</summary>
  <p>content</p>
</details>

我缺少什么？

谢谢。

我已经检查过这个问题。没有答案，这个问题也是如此。但我的问题在这里略有不同。我只是在 中添加另一个元素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 正在那里工作，如果您想实时查看它，请单击此处。