與動態手風琴合攏

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

祝你好運！