Question

如何使手风琴动态化例如，如果我们单击特定的面板，那么它应该仅显示该部分
如何通过单击标签来展开所有折叠。

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

如果您想手动进行操作，请点击collapse Referances

2019-02-27T10:21:58.3234459Z                Total    Copied   Skipped  

Mismatch    FAILED    Extras
2019-02-27T10:21:58.3234459Z     Dirs :      1688         0      1688         0         0         0
2019-02-27T10:21:58.3234459Z    Files :      6107         6      6101         0         0         0
2019-02-27T10:21:58.3234459Z    Bytes :  246.01 m   299.2 k  245.71 m         0         0         0
2019-02-27T10:21:58.3234459Z    Times :   0:00:17   0:00:00                       0:00:00   0:00:17
2019-02-27T10:21:58.3234459Z 
2019-02-27T10:21:58.3234459Z 
2019-02-27T10:21:58.3234459Z    Speed :             3879329 Bytes/sec.
2019-02-27T10:21:58.3234459Z    Speed :             221.976 MegaBytes/min.
2019-02-27T10:21:58.3234459Z 
2019-02-27T10:21:58.3234459Z    Ended : Wed Feb 27 11:21:58 2019
2019-02-27T10:21:58.3702460Z ##[error]Process completed with exit code 1.

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

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

Answer 2

您需要绑定引导所依赖的属性以相应地切换div：

面板标题：id，href，aria-controls
panel-collapse：ID，由aria-labeled

尝试以下示例：

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

如何使手风琴动态化-使用Angular 6

3 个答案: