[英]Collapse with dynamic accordions
<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>
I am using bootstrap with meteor. 我正在使用流星引导程序。 I have created a form which adds accordions dynamically according to the form data.
我创建了一个根据表单数据动态添加手风琴的表单。 The accordions are added successfully.
手风琴添加成功。 The only problem is it only collapses the first accordion even if I click the second or third one.
唯一的问题是,即使我单击第二个或第三个手风琴,它也只会折叠第一个手风琴。 How can I make the specific accordion collapse when it being added dynamically?
动态添加特定手风琴时,如何使其折叠?
It's a referencing issue you are having. 这是您遇到的参考问题。 Looking at your code, this line
查看您的代码,这一行
<a data-toggle="collapse" data-parent="#accordion" href=".collapse">
will be repeated for each of the three accordions dynamically generated. 将针对动态生成的三个手风琴中的每一个重复进行重复操作。
Meaning your href=".collapse"
attribute in the a
tag for each accordion will always be pointing to the same <div class="panel-collapse collapse">
element. 意味着每个手风琴
a
标签中的href=".collapse"
属性将始终指向相同的<div class="panel-collapse collapse">
元素。 That explains why only the first accordion (first of its type) opens even when you click the second or third accordion triggers. 这就解释了为什么即使单击第二个或第三个手风琴触发器也仅打开第一个(手风琴)类型。
To get it all working: Use a dynamically generated ID referencing on your href
attribute instead of a class. 要使其全部正常工作:在
href
属性而不是类上使用动态生成的ID引用。 In other words, use an increment counter or something along those lines. 换句话说,使用增量计数器或类似的东西。 And also make sure you generate a matching ID on your collapse
div
element. 还要确保在折叠
div
元素上生成匹配的ID。 As an example, you could have something like: 例如,您可能会遇到以下情况:
<a data-toggle="collapse" data-parent="#accordion" href="{{#dynamicallyGeneratedID}}">
...
then you could have something like: 那么您可能会遇到类似:
<div class="panel-collapse collapse" id="{{dynamicallyGeneratedID}}">
...
So let's say for accordion one that will result in something like: 因此,对于手风琴来说,这将导致以下结果:
<a data-toggle="collapse" data-parent="#accordion" href="#formOne">
...
then your panel body will also be: 那么您的面板主体也将是:
<div class="panel-collapse collapse" id="formOne">
...
All the best of luck! 祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.