与动态手风琴合拢

Question

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

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

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

祝你好运！