Javascript 我试着让左侧菜单在角度上像手风琴一样折叠，但不起作用？

我在angular 7应用程序上工作，我试图使左侧菜单手风琴可展开和折叠，但它不起作用

对于主菜单，我将主报告类别显示为：

<ul *ngFor="let rep of allReportCategories"  style="margin-top:2px;"  class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<span><button class="accordion">{{rep.reportCategory}}</button></span>

我在Stackbliz的工作已经有了数据，显示了主要类别和子类别，但我无法解决手风琴的问题

更新帖子 我的按钮业务逻辑

我需要将主类别传递给函数getreportbycategory，但我不知道

     this._displayreport.GetreportByCategoryId(this.reportid).subscribe((data: any[]) => {  
            this.reportsubCategory = data; 
          });
 toggleAccordian(event, index) {
      var element = event.target;
      element.classList.toggle("active");
     this._displayreport.GetreportByCategoryId(index);
  }

以及如何在打开页面时将其显示为手风琴

---

如果可能的话，你能给我看一下代码吗？

在ngonInit的allreportcategories数据中添加一个“折叠”字段，将折叠字段传递给每个子级，为“显示：块”/“显示：无”开关设置ngClass基于你传递的折叠字段，设置onclick以切换折叠字段的真/假

import { Component, OnInit } from '@angular/core';
import { DisplayreportService } from './displayreport.service';
import { HttpClient } from '@angular/common/http';
import { Router , ActivatedRoute} from '@angular/router';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  expanded = new Array(3).fill(false);
datalis:string;
allReportCategories:any[];
reportsubCategory:any[];
reportByCategoryId:any[];
allReportsubCategory:any[];
reportCategoryIdparam:string;
  constructor(public http: HttpClient, private _router: Router, private _displayreport: DisplayreportService) { }

  ngOnInit() {


      // this._displayreport.getallReportCategories().subscribe((data: any[]) => {  
       // this.allReportCategories = data;  

    //  });  
this.allReportCategories=this._displayreport.getallReportCategories().map((e) => {
  e.collapse = false;
  return e
});

console.log(this.allReportCategories)

       //this._displayreport.GetreportByCategoryId(this.reportid)//.subscribe((data: any[]) => {  
       // this.reportByCategoryId = data;  

      //});  
    //  this.reportid="3";
//this.reportByCategoryId=this._displayreport.GetreportByCategoryId////(this.reportid);

  this.reportByCategoryId = this._displayreport.GetreportByCategoryId("3");
  console.log("data by category id" + this.reportByCategoryId);
  this.reportsubCategory=this._displayreport.getallReportsubCategory();   

  }
   toggleAccordian(event, index) {
      var element = event.target;
      console.log("element is" +JSON.stringify(index)  )
      console.log("element is" +JSON.stringify(element)  )
      this.allReportCategories[index].collapse = !this.allReportCategories[index].collapse
    //   element.classList.toggle("active");
    //   if(this.allReportCategories[index].isActive) {
    //    this.allReportCategories[index].isActive = false;
    //   } else {
    //     this.allReportCategories[index].isActive = true;
    //   }    
    //  this._displayreport.GetreportByCategoryId(index);
    //  console.log(this._displayreport.GetreportByCategoryId(index))
  }

}

您需要在按钮处添加一些单击处理程序，我看不到任何与accrodion打开相关的逻辑，似乎没有实现。你能帮助我如何为stackblizI上存在的代码编写逻辑吗？单击每个主要类别旁边的按钮时，需要显示子类别报告，基于类别I谢谢你的答复。你能通过编写代码帮助我更清楚地了解情况吗。我通过业务更新了stackbliz请您在这里帮我写代码或更新stackbliz如果可能的话请您帮助我通过手风琴协作修改上面的stackbliz如果可能的话请任何人帮助我上面有stackbliz请您给我看一下或者根据需要在这里写代码好吗

     this._displayreport.GetreportByCategoryId(this.reportid).subscribe((data: any[]) => {  
            this.reportsubCategory = data; 
          });
 toggleAccordian(event, index) {
      var element = event.target;
      element.classList.toggle("active");
     this._displayreport.GetreportByCategoryId(index);
  }

import { Component, OnInit } from '@angular/core';
import { DisplayreportService } from './displayreport.service';
import { HttpClient } from '@angular/common/http';
import { Router , ActivatedRoute} from '@angular/router';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  expanded = new Array(3).fill(false);
datalis:string;
allReportCategories:any[];
reportsubCategory:any[];
reportByCategoryId:any[];
allReportsubCategory:any[];
reportCategoryIdparam:string;
  constructor(public http: HttpClient, private _router: Router, private _displayreport: DisplayreportService) { }

  ngOnInit() {


      // this._displayreport.getallReportCategories().subscribe((data: any[]) => {  
       // this.allReportCategories = data;  

    //  });  
this.allReportCategories=this._displayreport.getallReportCategories().map((e) => {
  e.collapse = false;
  return e
});

console.log(this.allReportCategories)

       //this._displayreport.GetreportByCategoryId(this.reportid)//.subscribe((data: any[]) => {  
       // this.reportByCategoryId = data;  

      //});  
    //  this.reportid="3";
//this.reportByCategoryId=this._displayreport.GetreportByCategoryId////(this.reportid);

  this.reportByCategoryId = this._displayreport.GetreportByCategoryId("3");
  console.log("data by category id" + this.reportByCategoryId);
  this.reportsubCategory=this._displayreport.getallReportsubCategory();   

  }
   toggleAccordian(event, index) {
      var element = event.target;
      console.log("element is" +JSON.stringify(index)  )
      console.log("element is" +JSON.stringify(element)  )
      this.allReportCategories[index].collapse = !this.allReportCategories[index].collapse
    //   element.classList.toggle("active");
    //   if(this.allReportCategories[index].isActive) {
    //    this.allReportCategories[index].isActive = false;
    //   } else {
    //     this.allReportCategories[index].isActive = true;
    //   }    
    //  this._displayreport.GetreportByCategoryId(index);
    //  console.log(this._displayreport.GetreportByCategoryId(index))
  }

}

<div class="row" style="display: block;float: left;margin-left:10px; margin-top: 2px;">
    <div class="page-sidebar navbar-collapse collapse">
    <nav class="colsm12" id="">
            <ul *ngFor="let rep of allReportCategories;let i = index;"  style="margin-top:2px;" class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">

                    <li class="active open">
                        <a  id="menu" >

                            <i class="rep.menuIcon"></i>
                            <span ><button class="accordion" (click)="toggleAccordian($event, i)">{{rep.reportCategory}}
                            </button></span>

                        </a>
                        <ul [ngStyle]="{'display':rep.collapse ? 'block' : 'none' }" *ngFor="let subrep of reportsubCategory"  style="display:block;" id="submenu" style="padding-left:7px;" hide="!rep.isActive">


                            <div *ngIf="subrep.reportCategoryID === rep.reportCategoryID" class="wrapper" >


                                <a href="/reportdetails?id={{subrep.reportID}}">


                                            <span class="sideNav nav navbar">{{subrep.reportName}}</span>

                                        </a>

                            </div>



                        </ul>



            </ul>
        </nav>
        </div>
    </div>