Angular4+Bootstrap4折叠列表组无法正常折叠求助

嘿，我看到你遇到了可折叠列表组不生效的问题，结合你的描述和代码片段，我发现几个关键问题，咱们一步步来搞定：

1. 版本不匹配是核心问题 #

你提到用的是Bootstrap4，但代码里引入的是Bootstrap3的CSS文件，这会直接导致Bootstrap4的折叠组件样式和功能都无法正常工作。另外，Bootstrap4的JavaScript组件还依赖Popper.js，你目前的代码里也没引入它，这也是折叠功能失效的重要原因。

修正依赖引入 #

把头部的资源替换成Bootstrap4的正确依赖，注意加载顺序必须是：jQuery → Popper.js → Bootstrap JS：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap4 CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
  <!-- jQuery（版本兼容Bootstrap4即可） -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Popper.js（Bootstrap4折叠/下拉组件必需） -->
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <!-- Bootstrap4 JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
</head>

2. 使用Bootstrap4正确的可折叠列表组结构 #

Bootstrap4的折叠组件结构和Bootstrap3略有差异，以下是一个可直接复用的示例：

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action" data-toggle="collapse" data-target="#collapseContent" aria-expanded="false" aria-controls="collapseContent">
    点击展开/折叠内容
  </a>
  <div class="collapse" id="collapseContent">
    <div class="card card-body">
      这是折叠的内容区域，你可以在这里放置子列表、文本或其他任意组件。
    </div>
  </div>
</div>

3. 更适合Angular的方案：用ng-bootstrap替代原生Bootstrap JS #

在Angular项目里直接用jQuery和原生Bootstrap JS不是最佳实践，容易和Angular的变更检测机制冲突，导致DOM不同步。推荐使用ng-bootstrap——这是专门为Angular打造的Bootstrap组件库，完全不需要依赖jQuery和Popper.js。

快速上手ng-bootstrap折叠组件 #

1. 安装依赖（确保项目已引入Bootstrap4的CSS）：

npm install @ng-bootstrap/ng-bootstrap bootstrap@4

2. 在app.module.ts中导入对应模块：

import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbCollapseModule, ...],
  ...
})
export class AppModule { }

3. 在组件中实现折叠功能：

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action" (click)="isCollapsed = !isCollapsed">
    点击展开/折叠内容
  </a>
  <div [ngbCollapse]="isCollapsed">
    <div class="card card-body">
      这是用ng-bootstrap实现的折叠内容，完全贴合Angular的开发模式，不会有DOM不同步的问题。
    </div>
  </div>
</div>

// 组件类中定义控制折叠状态的变量
isCollapsed = true;

这样就能完美实现可折叠列表组的功能啦，而且更符合Angular的开发规范。

内容的提问来源于stack exchange，提问作者Adrienn Kocsis