Collapse mit dynamischen Akkordeons

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> 

Ich benutze Bootstrap mit Meteor. Ich habe ein Formular erstellt, das Akkordeons dynamisch gemäß den Formulardaten hinzufügt. Die Akkordeons wurden erfolgreich hinzugefügt. Das einzige Problem ist, dass nur das erste Akkordeon kollabiert, selbst wenn ich auf das zweite oder dritte klicke. Wie kann ich das spezifische Akkordeon zusammenbrechen lassen, wenn es dynamisch hinzugefügt wird?

Answer 1

Es handelt sich um ein Referenzproblem, das Sie haben. dynamisch generierte Blick auf den Code, diese Linie

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

wird für jede der drei Akkordeons wiederholt werden.

Bedeutung Ihre href=".collapse" Attribut in der a Tag für jedes Akkordeon wird immer auf das gleiche Element <div class="panel-collapse collapse"> zeigen. Das erklärt, warum nur das erste Akkordeon (das erste seiner Art) geöffnet wird, auch wenn Sie auf den zweiten oder dritten Akkordeon-Trigger klicken.

Damit alles funktioniert: Verwenden Sie eine dynamisch generierte ID-Referenzierung auf Ihrem href-Attribut anstelle einer Klasse. Mit anderen Worten, verwenden Sie einen Inkrementzähler oder etwas in diesen Zeilen. Stellen Sie außerdem sicher, dass Sie eine übereinstimmende ID für Ihr Einsturzelement div generieren. Als Beispiel könnten Sie etwas wie:

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

dann könnte man so etwas wie haben:

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

wir für Akkordeon man so sagen, dass in so etwas wie führen:

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

dann ist Ihr Panel Körper auch:

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

Alles Gute!