代码之家 › 专栏 › 技术社区 › AbhiRam

如何在角上做手风琴

angular css html

AbhiRam · 技术社区 · 6 年前

我是一个初学者的角度,我试图手风琴使用下面的代码,但它不工作,并显示错误,如 event.getElementsByClassName不是函数 有人能帮帮我吗?我哪里做错了

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

    }
}

3 回复 | 直到 6 年前

user4676340 user4676340 6 年前

虽然你有个好主意,但你应该停止使用“老办法”。

Angular是一个具有非常强大功能的框架。如果你没有充分利用它们,那么你就不应该使用它!

比如看 this stackblitz :虽然非常小,但它显示了角度的力量。组件中没有代码,并且您已经有一个(非动画)手风琴!

<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>

我建议你读一读 the documentation 这样你就能看到Angular所能做的一切。我知道很长,但相信我,这是值得的。

Community CDub 4 年前

将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

你可以用不同的方法达到相同的结果。

SiddAjmera 6 年前

visible 说)应用 display: block

然后,创建一个属性( currentIndex )在组件类中。每当你点击一个部分,只要设置 ,应用 看得见的 [ngClass]

模板:

<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 供参考。