在Angular 7+中，您可以使用ng-bootstrap库来实现菜单折叠而不是弹出框的效果。下面是一个示例解决方案：

1. 首先，您需要安装ng-bootstrap库。您可以使用以下命令将其安装到您的项目中：

npm install @ng-bootstrap/ng-bootstrap

2. 接下来，您需要在您的模块中导入所需的模块。在您的模块文件中添加以下导入语句：

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

并将NgbModule添加到imports数组中。

3. 在您的组件模板中，您可以使用ngbDropdown指令来创建一个折叠菜单。以下是一个示例模板：

  Toggle Dropdown
  

    Action 1
    Action 2
    Action 3
  

在上面的示例中，我们使用了ngbDropdown指令来创建一个折叠菜单。我们使用ngbDropdownToggle指令将按钮与折叠菜单关联起来，并使用ngbDropdownMenu指令来定义折叠菜单的内容。

4. 最后，您需要在您的组件类中导入NgbDropdown类，并在需要的地方使用它。以下是一个示例组件类：

import { Component } from '@angular/core';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
  constructor(public dropdown: NgbDropdown) { }
}

在上面的示例中，我们导入了NgbDropdown类，并在构造函数中注入了它。这样我们就可以在需要的地方使用this.dropdown.open()和this.dropdown.close()方法来手动打开和关闭折叠菜单。

使用以上步骤，您可以在Angular 7+中实现ngbDropdown菜单折叠而不是弹出框的效果。