我们如何将简单的手风琴转换为角度

我们如何将这个简单的Acrodian转换为角度？我尝试使用Angular中的QueryList的ViewChildren。请提供您的建议。

var accordions = document.getElementsByClassName("accordion");
for (var i = 0; i < accordions.length; i++) {
  accordions[i].onclick = function () {
    this.classList.toggle('is-open');
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      // accordion is currently open, so close it
      content.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content.style.maxHeight = content.scrollHeight + "px";      
    }
  }
}

.container {
  width: 80%;
  max-width: 600px;
  margin: 50px auto;
}
button.accordion {
  width: 100%;
  background-color: whitesmoke;
  border: none;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  color: #444;
  cursor: pointer;
  transition: background-color 0.2s linear;
}
button.accordion:after {
  content: "f055";
  font-family: "fontawesome";
  font-size: 14px;
  float: right;
}
button.accordion.is-open:after {
  content: "f056";
}
button.accordion:hover,
button.accordion.is-open {
  background-color: #ddd;
}
.accordion-content {
  background-color: white;
  border-left: 1px solid whitesmoke;
  border-right: 1px solid whitesmoke;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title> Simple accordion</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- content starts here -->
  <div class="container">
    <h1>Accordions</h1>
    <button class="accordion">Accordian #1</button>
    <div class="accordion-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo,
        ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
      </p>     
    </div>
    <button class="accordion">Accordian #2</button>
    <div class="accordion-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo,
        ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
      </p>     
    </div>
    <button class="accordion">Accordian #3</button>
    <div class="accordion-content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo,
        ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum?
      </p>
    </div>
  </div>
  <!-- contend ends here -->
  <script src="index.js"></script>
</body>
</html>

您需要复制html到Angular中的HTML文件组件，CSS到CSS组件

和单击事件您可以为这种情况创建指令

html

<button accordion class="accordion">Accordian #1</button>

@Directive({ selector: '[accordion]' })
export class AccordionDirective {
  constructor(private el: ElementRef, private renderer: Renderer) {
  }
  @HostListener('click', ['$event']) onClick($event) {
    console.info($event);
    this.el.nativeElement.classList.toggle('is-open');
    var content = this.el.nativeElement.nextElementSibling;
    if (content.style.maxHeight) {
      // accordion is currently open, so close it
      content.style.maxHeight = null;
    } else {
      // accordion is currently closed, so open it
      content.style.maxHeight = content.scrollHeight + "px";
    }
  }
}

https://stackblitz.com/edit/angular-directive-accordion?file=src/app/app/app.component.ts

您的问题只是一个使用JSfiddle的班轮，仅使用jQuery和js，我仍然会尝试详细说明您的答案，但下次尝试详细发布您的问题。p>为了更好地理解此链接-https：//material.angular.io/components/expansion/api

import {Component} from '@angular/core';
/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
  styleUrls: ['expansion-overview-example.css'],
})
export class ExpansionOverviewExample {
  panelOpenState = false;
}

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
      </mat-panel-description>
    </mat-expansion-panel-header>
    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>
Also import below one in your module-
import {MatExpansionModule} from '@angular/material/expansion';

相关内容

最新更新

热门标签：