Angular项目实现手风琴（Accordion）效果遇问题，请求修复StackBlitz示例

问题根源 #

w3schools的原生手风琴示例依赖直接操作全局DOM，但Angular组件的视图初始化时机与原生DOM加载逻辑不匹配，直接用document.getElementsByClassName这类原生API无法正确获取组件内的DOM元素，导致事件绑定失效，手风琴功能无法触发。

具体修复步骤 #

1. 改用Angular视图查询获取DOM元素 #

在组件类中通过@ViewChildren替代原生DOM查询，确保能正确获取组件内的按钮和面板元素：

import { Component, ViewChildren, ElementRef, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
  @ViewChildren('accordionBtn') accordionBtns!: ElementRef[];
  @ViewChildren('accordionPanel') accordionPanels!: ElementRef[];

  ngAfterViewInit() {
    this.accordionBtns.forEach((btnRef, index) => {
      const btn = btnRef.nativeElement;
      btn.addEventListener('click', () => {
        // 切换当前面板显示状态
        const panel = this.accordionPanels[index].nativeElement;
        panel.style.display = panel.style.display === 'block' ? 'none' : 'block';

        // 可选：关闭其他面板，保持单一展开状态
        this.accordionPanels.forEach((otherPanelRef, otherIndex) => {
          if (otherIndex !== index) {
            otherPanelRef.nativeElement.style.display = 'none';
          }
        });
      });
    });
  }
}

2. 修改模板添加模板引用变量 #

在HTML模板中给按钮和面板添加对应的模板引用变量，让组件能精准定位元素：

<button #accordionBtn class="accordion">Section 1</button>
<div #accordionPanel class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button #accordionBtn class="accordion">Section 2</button>
<div #accordionPanel class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button #accordionBtn class="accordion">Section 3</button>
<div #accordionPanel class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

3. 保留原CSS样式保证视觉效果 #

确保CSS样式与w3schools示例一致，维持手风琴的基础交互样式：

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

额外优化建议 #

• 可以使用Angular的Renderer2替代直接修改style.display，更符合Angular最佳实践：

import { Renderer2 } from '@angular/core';

// 在构造函数注入Renderer2
constructor(private renderer: Renderer2) {}

// 替换原style修改逻辑
this.renderer.setStyle(panel, 'display', panel.style.display === 'block' ? 'none' : 'block');

• 若需要更复杂的手风琴功能，可直接使用Angular Material的MatAccordion组件，无需手动实现基础交互逻辑。

内容的提问来源于stack exchange，提问作者Prabir Choudhury