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>

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

Answer 1

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

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

对于动态生成的三个手风琴中的每一个，将重复

。

意味着每个手风琴的href=".collapse"标记中的a属性始终指向相同的<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">
  ...

祝你好运！

动态手风琴折叠

1 个答案: