如何使 Accordion 动态 - 使用 Angular 6

Question

如何使手风琴动态化就像如果我们点击特定的面板那么它应该只显示那部分
我们如何通过点击标签展开全部折叠。

导出 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-labeledby

试试这个例子：

<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: '[=11=]2B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "12";
}

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

如何使 Accordion 动态 - 使用 Angular 6

How to make Accordion Dynamic - Using Angular 6

accordion

angular