Разверните элемент details, когда URL вызывается с указанными хэшами c - PullRequest
Новая
       29

Разверните элемент details, когда URL вызывается с указанными хэшами c

2 голосов
/ 08 марта 2020

Я использовал элементы 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 для автоматического расширения раздела, если URL вызывается с #comments га sh: 

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();

Как я могу также развернуть details#comments, когда URL вызывается с любым #comment-X га sh с использованием Javascript (без jQuery)? В идеале страница также прокручивается до точки, в которой присутствует элемент #comment-X.

1 Ответ

0 голосов
/ 08 марта 2020

Речь идет об ослаблении вашей проверки ха sh, чтобы разрешить не только "комментарии", но и "комментарий-111". Я предположил, как ваши HTML предполагают, что ваши идентификаторы являются цифрами c. 

//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];
    }
}
...