Question

我是angular的初学者，我正在尝试使用下面的代码来折叠手风琴，但是它不起作用并显示诸如 event.getElementsByClassName不是函数之类的错误

.html：

h2>Accordion</h2>

<button class="accordion" (click) = "expand($event)">Section 1</button>
<div 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 class="accordion" (click) = "expand($event)">Section 2</button>
<div 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 class="accordion" (click) = "expand($event)">Section 3</button>
<div 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>

.css：

.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;
}

.ts：

export class HomePage {

  expand(event){

         var panel = event.getElementsByClassName("accordion");
         if (panel.style.display === "block") {
           panel.style.display = "none";
       } else {
             panel.style.display = "block";
        }  

    }
}

Answer 1

尽管您有个好主意，但您应该停止使用“旧方法”。

Angular是一个具有非常强大功能的框架。如果您没有充分利用它们，那么就不要使用它！

例如查看https://kotlinlang.org/docs/reference/using-maven.html#compiling-kotlin-and-java-sources：尽管非常小，但它显示了Angular的强大功能。组件中没有代码，您已经有一个（非动画）手风琴！

<div class="accordion">
  <h2 class="title" (click)="opened = !opened">Title of the accordion</h2>
  <div class="content-container" [class.opened]="opened">
    <p class="content">Content of the accordion</p>
  </div>
</div>

我建议您阅读this stackblitz，以便您了解Angular可以做的所有事情。我知道这很长，但是相信我，这是值得的。

Answer 2

将您的Ts函数更改为：

 expand(event){
     if (event.style.display === "block") {
       event.style.display = "none";
   } else {
         event.style.display = "block";
    }  
}

您的HTML部分应该是：

    <h2>Accordion</h2>

<button class="accordion" (click) = "expand(panel1)">Section 1</button>
<div #panel1 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 class="accordion" (click) = "expand(panel2)">Section 2</button>
<div #panel2 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 class="accordion" (click) = "expand(panel3)">Section 3</button>
<div #panel3 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>

这里有个工作stackblitz

PS：您可以通过各种不同的方式获得相同的结果。

Answer 3

如果您有一个从某些API获取的动态列表，然后又想在手风琴中呈现它，则可以创建CSS类（visible说）来应用display: block

然后，在组件类中创建一个属性（currentIndex）。每当您单击某个部分时，只需将currentIndex设置为被单击部分的索引即可。然后基于currentIndex，通过visible

应用[ngClass] CSS类

模板：

<h2>Accordion</h2>

<div *ngFor="let section of sections; let i = index;">
  <button class="accordion" (click) = "expand(i)">{{section.name}}</button>
  <div class="panel"
    [ngClass]="{ 'visible' : currentIndex === i }">
    <p>{{section.content}}</p>
  </div>
</div>

班级：

export class HomePage {
  currentIndex = -1;

  sections = [
    { name: 'Section 1', content: 'Content 1' },
    { name: 'Section 2', content: 'Content 2' },
    { name: 'Section 3', content: 'Content 3' },
    ...
  ];

  expand(index) {
    if(this.currentIndex === index) {
      this.currentIndex = null;
      return;
    }
    this.currentIndex = index;
  }

}

CSS：

...

.visible {
  display: block;
}

这是您推荐的StackBlitz。

如何在Angular中做手风琴

.html：

.css：

.ts：

3 个答案: