javascript - 折叠动态 Accordion

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>

我正在使用 bootstrap 和 meteor。我创建了一个根据表单数据动态添加 Accordion 的表单。 Accordion 添加成功。唯一的问题是即使我点击第二个或第三个，它也只会折叠第一个 Accordion 。动态添加时如何使特定的 Accordion 折叠？

Answer 1

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

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

将为动态生成的三个 Accordion 中的每一个重复。

意思是你的href=".collapse" a 中的属性每个 Accordion 的标签将始终指向相同的 <div class="panel-collapse collapse">元素。这就解释了为什么即使您单击第二个或第三个 Accordion 触发器，也只有第一个 Accordion (同类中的第一个)打开。

要让它全部工作:在您的 href 上使用动态生成的 ID 引用属性而不是类。换句话说，使用增量计数器或类似的东西。还要确保在崩溃时生成匹配的 ID div元素。例如，你可以有这样的东西:

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

然后你可以有这样的东西:

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

让我们假设 Accordion 会产生类似这样的结果:

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

那么你的面板主体也将是:

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

祝你好运!