Question

我有一个html5页面，其中包含以下内容：

<details>
  <summary>X and Y</summary>
  <details id="x">
    <summary>X</summary>
    Long text about x.
  </details>
  <details id="y">
    <summary>Y</summary>
    Long text about Y.
  </details>
</details>
A lot of other stuff.
<a href="#x>Go to X</a>
<a href="#y>Go to Y</a>

我已经使用了CSS详细信息：目标规范在用户点击其中一个“转到X / Y”链接时突出显示链接目标。但是，如果未展开顶级详细信息元素，则用户无法看到它，而且似乎无效。

当点击针对其某些孩子的链接时，有没有办法（最好只有html5 + css）扩展顶级详情元素？

Answer 1

现在唯一的方法是使用Javascript。您可以阅读已编写的代码：http://www.sitepoint.com/fixing-the-details-element/

Answer 2

我写了这段代码

<script>
  function openDetailsNested() {
    var listOpen = document.querySelectorAll("details[open]");
    if(listOpen.length > 0) {
      for(var i=0; i<listOpen.length; i++) {
        var elem = listOpen[i];  
        while (elem) {
          if (elem.matches("DETAILS")) {
            elem.setAttribute("open",""); 
          }
          elem = elem.parentElement;
        }      
      }
    }
  }
  window.addEventListener("load", openDetailsNested,true);
</script>

如何扩展嵌套的HTML5 <details>元素以使链接目标可见？</details>

2 个答案: