<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]
コメントを追加