css - 如何扩展嵌套的 HTML5使链接目标可见的元素？

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 details:target 规范在用户单击“转到 X/Y”链接之一时突出显示链接目标。但是，如果顶层 details-element 没有展开，用户就看不到它，而且似乎它不起作用。

那么有没有办法（最好只有html5 + css）在单击针对其某些子项的链接时扩展顶级详细信息元素？

Answer 1

The only way for now is using Javascript. You can read this for already written code: 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>