如何从外部链接打开手风琴

Question

我正在尝试滚动到关闭的手风琴内不同页面上的 ID。 我尝试了几种不同的方法，但我似乎无法弄清楚。 任何帮助是极大的赞赏。

我猜也许我可以在我当前的 Javascript 代码中实现一些可以实现这一点的东西？ 谢谢

锚定标签 -

<a href="/pagename#test">This is a Test</a>

手风琴 -

<details>    
  <summary>
    <div class="box box">
      <div class="box-study box-study--content">
        Accordion Name
      </div>
      <div class="box-study box-study--image">
    <div class="studyicon">
            <img src="/iconimage.png">
    </div>
   
      </div>
    </div>

    </summary>


<div class="inside themeGrey">


   <h3 id="#test">Name of area I want to scroll too</h3>

</div>

     </details>

手风琴的 Javascript

/** Class representing an accordion component. */
class Accordion {
  /**
   * Create an accordion component
   *
   * Accepts a container element which should contain a list of `details` and
   * `summary` elements
   *
   * @param   {String}  selector  The container element.
   */
  constructor(selector) {
    if (typeof selector !== "string") {
      console.error("Accordion selector must be a string");
      return;
    }

    this._container = document.querySelector(selector);
    
    this._container.addEventListener('click', (event) => this._toggle(event));
  }

  /**
   * Static method to close all `details` elements that are descendants of the
   * passed in container element.
   *
   * @param   {(HTMLElement|HTMLDocument)}  [elem=document]  The container
   */
  static closeAll(elem = document) {
    const opened = elem.querySelectorAll("details[open]");
    for (const elem of opened) {
      elem.removeAttribute("open");
    }
  }

  /** Private methods */
  
  /**
   * Toggle the accordion elements
   *
   * @param   {Event}  event  The triggering event object
   */
  _toggle(event) {
    event.preventDefault();
    
    const details = event.target.closest("details");
    
    if (details.hasAttribute("open")) {
      details.removeAttribute("open");
    } else {
      Accordion.closeAll(this._container);
      details.toggleAttribute("open");
    }
  }
}

Answer 1

在页面加载时，您可以检查 URL 是否具有哈希值。 然后查看元素是否存在。 如果它存在，请检查它是否在详细信息字段内，如果是，则打开手风琴并滚动到该元素。

有关实现的详细信息，请参阅_loadFromHash 。

 /** Class representing an accordion component. */ class Accordion { /** * Create an accordion component * * Accepts a container element which should contain a list of `details` and * `summary` elements * * @param {String} selector The container element. */ constructor(selector) { if (typeof selector !== "string") { console.error("Accordion selector must be a string"); return; } this._container = document.querySelector(selector); this._container.addEventListener('click', this._toggle, false); this._loadFromHash(); } /** * Static method to close all `details` elements that are descendants of the * passed in container element. * * @param {(HTMLElement|HTMLDocument)} [elem=document] The container */ static closeAll(elem = document) { const opened = elem.querySelectorAll("details[open]"); for (const elem of opened) { elem.removeAttribute("open"); } } /** Private methods */ /** * Toggle the accordion elements * * @param {Event} event The triggering event object */ _toggle(event) { event.preventDefault(); const details = event.target.closest("details"); if (details.hasAttribute("open")) { details.removeAttribute("open"); } else { Accordion.closeAll(this._container); details.toggleAttribute("open"); } } _loadFromHash() { // FOR DEMO SINCE THERE IS NO HASH IN STACK OVERFLOW SNIPPET, REMOVE LINE IN REAL APP window.location.hash = '#test'; // Exit if no hash in url if(!window.location.hash) return; // Get element from hash, exit if not found const element = document.querySelector('#test'); if(!element) return; // Get parent details from element, exit if not found const details = element.closest('details'); if(!details) return; // Open accordion and scoll it into view details.toggleAttribute("open"); element.scrollIntoView(); } } new Accordion('details');

 <details> <summary> <div class="box box"> <div class="box-study box-study--content"> Accordion Name </div> <div class="box-study box-study--image"> <div class="studyicon"> <img src="/iconimage.png"> </div> </div> </div> </summary> <div class="inside themeGrey"> <h3 id="test">Name of area I want to scroll too</h3> </div> </details>