javascript - 使用焦点事件显示另一个元素

Question

我想打开<details>元素当亲戚<link>元素获得焦点或点击

<section>
    <ul>
        <li><a href="#job-1">1</a></li>
        <li><a href="#job-2">2</a></li>
        <li><a href="#job-3">3</a></li>
    </ul>
    <div>
        <details>
            <summary id="job-1">some text</summary>
            <table>       
            </table>
        </details>

        <details>
            <summary id="job-2">some text</summary>
            <table>
            </table>
        </details>

        <details>
            <summary id="job-3">some text</summary>
            <table>
            </table>
        </details>
    </div>
</section>

如果可能我想用 javascript 来做这件事

Answer 1

您可以遍历所有 a 标签，并为每个标签附加一个点击事件监听器，以触发相关联的 summary 元素的点击:

更新:由于您可能不想关闭已经打开的details，因此我为此添加了一个检查。

var links = document.querySelectorAll('section ul li a'); // would be better to use an id or at least classes here...

for (var i=0;i<links.length;i++) {
  links[i].addEventListener('click', function() {
    var summaryEl = document.querySelector(this.getAttribute('href'));
    // only trigger if the details are not already open
    if (!summaryEl.parentNode.open) {
      summaryEl.click();
    }
  });
}

<section>
    <ul>
        <li><a href="#job-1">1</a></li>
        <li><a href="#job-2">2</a></li>
        <li><a href="#job-3">3</a></li>
    </ul>
    <div>
        <details>
            <summary id="job-1">some text</summary>
            <table> 
            <tr><td>test content</td></tr>
            </table>
        </details>

        <details>
            <summary id="job-2">some text</summary>
            <table>
            <tr><td>test content</td></tr>
            </table>
        </details>

        <details>
            <summary id="job-3">some text</summary>
            <table>
            <tr><td>test content</td></tr>
            </table>
        </details>
    </div>
</section>