如何让手风琴默认折叠？

Question

我想使用 W3C here 为手风琴提供的 javascript。我的问题是面板默认展开。我希望它们在页面加载时折叠起来，但我不知道如何更改它。

javascript：

'use strict';

      class Accordion {
        constructor(domNode) {
          this.rootEl = domNode;
          this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');

          const controlsId = this.buttonEl.getAttribute('aria-controls');
          this.contentEl = document.getElementById(controlsId);

          this.open = this.buttonEl.getAttribute('aria-expanded') === 'true';

          // add event listeners
          this.buttonEl.addEventListener('click', this.onButtonClick.bind(this));
        }

        onButtonClick() {
          this.toggle(!this.open);
        }

        toggle(open) {
          // don't do anything if the open state doesn't change
          if (open === this.open) {
            return;
          }

          // update the internal state
          this.open = open;

          // handle DOM updates
          this.buttonEl.setAttribute('aria-expanded', `${open}`);
          if (open) {
            this.contentEl.removeAttribute('hidden');
          } else {
            this.contentEl.setAttribute('hidden', '');
          }
        }

        // Add public open and close methods for convenience
        open() {
          this.toggle(true);
        }

        close() {
          this.toggle(false);
        }
      }

      // init accordions
      const accordions = document.querySelectorAll('.accordion h3');
      accordions.forEach((accordionEl) => {
        new Accordion(accordionEl);
      });

HTML：

<div id="accordionGroup" class="accordion">
      <h3>
        <button type="button"
                aria-expanded="false"
                class="accordion-trigger"
                aria-controls="sect1"
                id="accordion1id">
          <span class="accordion-title">
            Section 1
            <span class="accordion-icon"></span>
          </span>
        </button>
      </h3>
      <div id="sect1"
           role="region"
           aria-labelledby="accordion1id"
           class="accordion-panel">
        <div>
          <div class="accordion-content">
            Section 1 content
          </div>
        </div>
      </div>
    </div>

我确保 aria-expanded="false"，但它在页面加载时仍然展开。

Answer 1

查看代码，它不会为您添加隐藏状态，因此您要么必须手动添加它，要么使用类似以下内容的代码

constructor(domNode) {
    this.rootEl = domNode;
    this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');

    const controlsId = this.buttonEl.getAttribute('aria-controls');
    this.contentEl = document.getElementById(controlsId);

    this.open = this.buttonEl.getAttribute('aria-expanded') === 'true';

    // make sure hidden elements are actually hidden
    if (!this.open && !this.contentEl.getAttribute("hidden")) { 
        this.contentEl.setAttribute("hidden", "")
    }

    // add event listeners
    this.buttonEl.addEventListener('click', this.onButtonClick.bind(this));
}

更新

在添加隐藏属性之前检查手风琴是否关闭以避免状态冲突。

如果设置了

hidden

，并且也设置了

aria-expanded

，或者相反的状态，则需要按两次按钮。第一次按同步属性，第二次实际执行您想要的操作。