如何制作Accordion Dynamic - 使用Angular 6

Question

1. 如何制作Accordion Dynamic就像我们点击特定面板那样它应该只显示那个部分
2. 我们如何通过单击标签来扩展所有崩溃。

export class HomeComponent实现OnInit {

  public homeDataviews = [];
  notes: Array<Note>;

  constructor(private _homeDataService: HomeDataService) {
    this.notes = [];
   }

  ngOnInit() {
    this._homeDataService.getViewData()
      .subscribe(data => this.homeDataviews = data);

  }

提前致谢 ：）

Answer 1

我建议你使用Data-parent属性（一些例子），here

如果你想手动完成，那么bootstrap折叠引用就在这里，collapse Referances

<script>
$(document).ready(function(){
  $(".btn-primary").click(function(){
    $(".collapse").collapse('toggle');
  });
  $(".btn-success").click(function(){
    $(".collapse").collapse('show');
  });
  $(".btn-warning").click(function(){
    $(".collapse").collapse('hide');
  });
});
</script>

或者您可以控制多路复用面板，

$("#collapseOne, #collapseTwo").collapse('hide'); //Close multiple

Answer 2

您需要绑定bootstrap所依赖的属性来相应地切换div：

• panel-heading：id，href，aria-controls
• panel-collapse：id，aria-labelledby

试试这个例子：

<div class="panel-heading" role="tab" [id]="'heading'+data.id">
    <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" [href]="'#collapse'+data.id" aria-expanded="true" [attr.aria-controls]="'collapse'+data.id">
            {{data.header}}
        </a>
    </h4>
</div>
<div [id]="'collapse'+data.id" class="panel-collapse collapse" role="tabpanel" [attr.aria-labelledby]="'heading'+data.id">
    <div class="panel-body">
        {{data.content}}
    </div>
</div>

Answer 3

您好Rahul，欢迎来到Stack Overflow。

为了了解您的代码示例，我们需要能够深入了解与问题相关的任何代码以及您尝试实现的主题。 （参见：保留问题代码“minimal”）

我对Angular知之甚少，所以我不确定在这方面是否可以帮助你。但是，如果你不需要你的主题来处理Angular代码，我在W3Schools上找到了一个使用HTML，CSS和JavaScript的手风琴的完美工作示例：Link。

如果您有任何其他问题，请与我们联系。

JSFiddle

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

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

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<button class="accordion">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">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">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>