我正在尝试创建嵌套 accordion ，并在单击子 accordion 时更改父 accordion 高度。这是一种工作，但仍然是家长 accordion 高度没有改变适当。任何帮助都会很好。

class Accordion {
  constructor(el) {
    this.el = el;
    this.isOpen = false;
    this.maxHeight = 0;
    this.expandedHeight = 0;
    this.isParent = this.el.dataset.parent === "true" ? true : false;
    this.trigger = this.el.querySelector(".accordion__head");
    this.container = this.el.querySelector(".accordion__container");
    this.trigger.addEventListener("click", this.toggle.bind(this));
  }

  toggle() {
    if (this.isOpen) {
      this.close();
    } else {
      this.open();
    }
  }

  open() {
    this.isOpen = true;
    this.updateHeight();
    // this.container.style.height =
    //   this.el.querySelector(".accordion__body").offsetHeight + "px";
    this.el.setAttribute("aria-expanded", true);
  }

  close() {
    this.isOpen = false;
    this.container.style.height = null;
    this.el.setAttribute("aria-expanded", false);
  }

  updateHeight() {
    this.calculateHeight();
    if (this.isOpen) this.maxHeight = this.expandedHeight;
    console.log(this.maxHeight);
    this.container.style.height = this.maxHeight + "px";
  }

  calculateHeight() {
    const content = this.el.querySelector(".accordion__container");
    let collapsedHeights = 0;
    // If this has other expansion panels nested inside, add their expanded heights to the total
    if (this.isParent) {
      const childPanels = [
        ...content.querySelectorAll(".accordion[aria-expanded]")
      ];
      collapsedHeights = childPanels.reduce(
        (accumulator, panel) =>
        accumulator + panel.querySelector(".accordion__body").offsetHeight,
        0
      );
    }

    this.expandedHeight = content ?
      content.querySelector(".accordion__body").offsetHeight +
      collapsedHeights :
      0;
  }
}

window.addEventListener("DOMContentLoaded", function() {
  Array.from(document.querySelectorAll(".accordion")).forEach(
    (item) => new Accordion(item)
  );
});

.container {
  max-width: 45rem;
  margin: auto;
  padding: 2.25rem;
}

.link {
  color: red;
  font-size: 12px;
  line-height: 18px;
  text-decoration-line: underline;
  text-underline-offset: 0.1em;
  cursor: pointer;
}

.accordion {
  margin-bottom: 1em;
}

.accordion.-child {
  width: 100%;
}

.accordion__head {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  text-align: left;
  background-color: #ddd;
  transition: background-color 0.125s;
}

.accordion__head:focus {
  background-color: #aaa;
}

.accordion__head.-child {
  padding: 0;
  background-color: transparent;
}

.accordion__head.-child span {
  font-weight: initial;
}

.accordion__container {
  height: 0;
  overflow-y: hidden;
  background-color: #eee;
  transition: height 0.25s;
  will-change: height;
}

.accordion__list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.accordion[aria-expanded=true] .accordion__topLink {
  display: none;
}

.accordion__bottomLink {
  display: flex;
  justify-content: flex-end;
}

.accordion__body {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

<div class='container'>
  <div aria-expanded='false' data-parent="true" class='accordion'>
    <div class='accordion__head'>
      <span>Show offers</span>
      <span><svg class="mdc-select__dropdown-icon-graphic" width="16" height="12" viewBox="0 0 12 8" focusable="false" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path class="mdc-select__dropdown-icon-inactive" fill-rule="evenodd" clip-rule="evenodd" d="M10.59 0L6 4.58L1.41 0L0 1.41L6 7.41L12 1.41L10.59 0Z" fill="#01093F"></path>
          <path class="mdc-select__dropdown-icon-active" fill-rule="evenodd" clip-rule="evenodd" d="M10.59 0L6 4.58L1.41 0L0 1.41L6 7.41L12 1.41L10.59 0Z" fill="#01093F"></path>
        </svg></span>
    </div>
    <div class='accordion__container'>
      <div class='accordion__body'>
        <div class='accordion__list'>
          <div class="accordion__list__item">
            <span>Finance</span>
            <span>Yes</span>
          </div>
          <div class="accordion__list__item">
            <div aria-expanded='false' class="accordion -child">
              <div class="accordion__head -child">
                <span>Special Conditions</span>
                <div class="link">View details</div>
              </div>
              <div class="accordion__container">
                <div class="accordion__body">
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这里是代码笔链接：https://codepen.io/ashesh-test/pen/ojmxmjn