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

debugcn 发表于 Dev

葡萄酒

我想<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 做到这一点

康斯坦丁格罗斯

您可以遍历所有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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。