在foreach循环中创建Bootstrap Accordion

时间:2013-08-26 18:16:43

标签: html twitter-bootstrap

我正在尝试创建一个动态音符字段,其中每个对话都在一个单独的手风琴中,并且遇到了一些麻烦。

我继续从bootstrap复制基本代码并注意到他们调用需要发生的不同事情的方式。所以我尝试在每个id的末尾为每个项{{ $cover_design_note->id }}添加我的唯一ID以尝试使其工作......但这似乎不起作用。它实际上似乎打破了一点。

任何帮助都会很精彩,我一直在努力解决这个问题。

我的代码看起来像这样

@foreach($cover_design->notes as $cover_design_note)
    <div class="noteAcc">
      <div class="accordion" id="accordion{{ $cover_design_note->id }}">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse{{ $cover_design_note->id }}" data-parent="#accordion{{ $cover_design_note->id }}" href="#collapse{{ $cover_design_note->id }}">Collapsible Group Item #1</a>
          </div><!--.accordion-heading-->
          <div id="collapse{{ $cover_design_note->id }}" class="accordion-body collapse in">
          <div class="accordion-inner">
                              Anim pariatur cliche...
          </div><!--.accordion-inner-->
        </div><!--.accordion-body-->
      </div><!--.accordion-group-->
     </div><!--.accordion-->
   </div><!--.noteAcc-->               
@endforeach

1 个答案:

答案 0 :(得分:1)

链接上的data-toggle属性应该保持不变。

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion{{ $cover_design_note->id }}" href="#collapse{{ $cover_design_note->id }}">Collapsible Group Item #1</a>
相关问题