用动态手风琴折叠答案

【问题标题】：Collapse with dynamic accordions用动态手风琴折叠
【发布时间】：2016-08-18 07:29:29
【问题描述】：

<div class="panel-group" id="accordion">
      {{#each forms}}
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href=".collapse">
            {{fid}}</a>
          </h4>
        </div>
        <div class="panel-collapse collapse">
          <div class="panel-body">
          {{> form}}
          </div>
        </div>
      </div>
      {{/each}}
    </div>

<template name="form">
  <li class="list-group-item list-group-item-warning">First name : {{fname}}</li>
  <li class="list-group-item list-group-item-warning">Last name : {{lname}}</li>
  <li class="list-group-item list-group-item-warning">Analysis : {{ydata}}</li>

</template>

我正在使用带有流星的引导程序。我创建了一个表单，它根据表单数据动态添加手风琴。手风琴已成功添加。唯一的问题是即使我单击第二个或第三个手风琴，它也只会折叠第一个手风琴。动态添加时如何使特定手风琴折叠？

【问题讨论】：

你能在 plnkr 或 codepen 中工作演示吗？

标签： javascript html twitter-bootstrap meteor

【解决方案1】：

这是您遇到的引用问题。查看您的代码，这一行

 <a data-toggle="collapse" data-parent="#accordion" href=".collapse">

将为动态生成的三个手风琴中的每一个重复。

意味着每个手风琴的a 标记中的href=".collapse" 属性将始终指向相同的<div class="panel-collapse collapse"> 元素。这就解释了为什么即使单击第二个或第三个手风琴触发器，也只会打开第一个手风琴（其类型中的第一个）。

要让这一切正常工作：在 href 属性上使用动态生成的 ID 引用而不是类。换句话说，使用增量计数器或类似的东西。并确保您在折叠div 元素上生成匹配的 ID。例如，你可以有类似的东西：

<a data-toggle="collapse" data-parent="#accordion" href="{{#dynamicallyGeneratedID}}"> 
  ...

那么你可以有类似的东西：

<div class="panel-collapse collapse" id="{{dynamicallyGeneratedID}}"> 
  ...

让我们说一下手风琴，它会产生类似的结果：

 <a data-toggle="collapse" data-parent="#accordion" href="#formOne"> 
   ...

那么您的面板主体也将是：

<div class="panel-collapse collapse" id="formOne">
  ...

祝你好运！

【讨论】：