当使用特定散列调用URL时，展开details元素

Question

我使用了details和summary元素来折叠页面的一部分。

<details id="comments">
<summary>Show comments</summary>
<ol>
<li id-"comment-101">This</li>
<li id-"comment-102">is</li>
<li id-"comment-103">cool</li>
</ol>
</details>

我还添加了这个Javascript代码，以便在使用#comments散列调用URL时自动扩展该部分：

function openTarget() {
var hash = location.hash.substring(1);
if(hash) var details = document.getElementById(hash);
if(details && details.tagName.toLowerCase() === 'details') details.open = true;
}
window.addEventListener('hashchange', openTarget);
openTarget();

当使用Javascript(无jQuery(使用任何#comment-X哈希调用URL时，我如何扩展details#comments？理想情况下，页面还将滚动到元素#comment-X所在的点。

Answer 1

这是一个放松对哈希的检查的问题，不仅允许"注释"，还允许"注释-111"。正如HTML所暗示的那样，我假设您的ID是数字。

//grab hash and its parts
let hash = location.hash.match(/^#(comment(s|-(d+)))$/);
if (hash) {
//resolve to element
let el = document.getElementById(hash[1]);
if (el) {
//open comments - not sure what your .open property does
el.closest('#comments').open = true;
//if is hash to specific comment, go to it
if (hash[3]) location.href = '#'+hash[3];
}
}