如何在Web组件中创建手风琴自定义元素

问题描述

我正在尝试使用javascript中的自定义元素创建手风琴。

我在HTML中编写的以下提到的HTML

var accordions = document.querySelectorAll(".accordion");

for (var i = 0; i < accordions.length; i++) {
  accordions[i].onclick = function () {
    this.classList.toggle('is-open');
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}

<div class="container">
  <button class="accordion">Accordian #1</button>
  <div class="accordion-content">
    <p> Content 1</p>
  </div>
</div>

此代码如何使用自定义元素创建？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）