Javascript 我们如何把一个简单的手风琴转换成有角度的？

我们怎样才能把这个简单的手风琴转换成有角度的呢？我在angular中尝试了使用querylist的viewchildren。请提供您的建议

var accordions=document.getelementsbyclassnameacordion； 对于var i=0；i<手风琴长度；i++{ 手风琴[i].onclick=function{ this.classList.toggle'is-open'； var content=this.nextElementSibling； 如果content.style.maxHeight{ //手风琴当前处于打开状态，请关闭它 content.style.maxHeight=null； }否则{ //手风琴当前已关闭，请打开它 content.style.maxHeight=content.scrollHeight+px； } } } .集装箱{ 宽度：80%； 最大宽度：600px； 保证金：50px自动； } 手风琴{ 宽度：100%； 背景色：白烟； 边界：无； 大纲：无； 文本对齐：左对齐； 填充：15px 20px； 字号：18px； 颜色：444； 光标：指针； 过渡：背景色0.2s线性； } 按钮。手风琴：之后{ 内容：\f055； 字体系列：Fontsome； 字体大小：14px； 浮动：对； } 按钮。手风琴。打开：之后{ 内容：\f056； } 按钮。手风琴：悬停， 手风琴按钮是开着的{ 背景色：ddd； } ·手风琴内容{ 背景色：白色； 左边框：1px固体白烟； 右边框：1px固体白烟； 填充：0 20px； 最大高度：0； 溢出：隐藏； 过渡：最大高度0.2s，易于进出； } 简易手风琴 手风琴 手风琴1 Lorem ipsum dolor sit amet，奉献精英。必须要有足够的质量来满足要求！这是我的工作， 理性的铜！塞德，德莱尼蒂，雷克桑代伊！动物，智慧，灵药？

手风琴2 Lorem ipsum dolor sit amet，奉献精英。必须要有足够的质量来满足要求！这是我的工作， 理性的铜！塞德，德莱尼蒂，雷克桑代伊！动物，智慧，灵药？

手风琴3 Lorem ipsum dolor sit amet，奉献精英。必须要有足够的质量来满足要求！这是我的工作， 理性的铜！塞德，德莱尼蒂，雷克桑代伊！动物，智慧，灵药？

---

您的问题只是一行JSFIDLE，只使用jquery和js，我仍然会尝试以角度详细解释您的答案，但下次尝试发布详细的问题

为了更好地理解，请访问此链接-

从'@angular/core'导入{Component}； /** *@title基本扩展面板 */ @组成部分{ 选择器：“扩展概述示例”， templateUrl:“扩展概述示例.html”， 样式URL:['expansion-overview-example.css']， } 导出类扩展概述示例{ panelOpenState=false； } 个人资料 键入您的姓名和年龄 自我感知面板 目前我是{{panelOpenState？'open'：'closed'} 我是可见的，因为我是开放的

还可以在模块中导入以下内容-

---

从“@angular/material/expansion”导入{MatExpansionModule} 您需要在angular中将HTML复制到HTML文件组件，将CSS复制到CSS组件

然后单击事件，您可以为此情况创建指令

HTML

---

在否决表决之前，如果您能解释其背后的原因会更好，因为它是一个工作代码，具有到角度材质指南的正确链接。我更新了OP内容，以获得清晰的问题上下文使用和布尔数组如何，使用click和[ngClass]？它更有棱角

<button accordion class="accordion">Accordian #1</button>

@Directive({ selector: '[accordion]' })
export class AccordionDirective {

  constructor(private el: ElementRef, private renderer: Renderer) {

  }

  @HostListener('click', ['$event']) onClick($event) {
    console.info($event);

    this.el.nativeElement.classList.toggle('is-open');

    var content = this.el.nativeElement.nextElementSibling;
    if (content.style.maxHeight) {
      // accordion is currently open, so close it
      content.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content.style.maxHeight = content.scrollHeight + "px";

    }
  }
}