当使用特定哈希调用 URL 时展开详细信息元素

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

这是一个放宽哈希检查的问题，不仅允许 "comments"，还允许 "comment-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];
    }
}

当使用特定哈希调用 URL 时展开详细信息元素

Expand details element when URL is called with specific hashes

html

javascript

hashchange