动态ids在玉器中的手风琴效果

Question

目前，我有一段代码，我需要在Jade文件中使用动态生成的ids来实现折叠效果。这是我目前所掌握的-

each product in products
  .col-xs-8
    #accordion.panel-group
      #panel1.panel.panel-info
        .panel-heading
          h4.panel-title
            a(data-toggle='collapse', data-target='#collapse#{product.id}', href='#collapse#{product.id}')
              | #{product.title}
        |         
        div(id="#collapse#{product.id}").panel-collapse.collapse.in
          .panel-body
            | #{product.description}
      | 

我无法获得此代码的手风琴效果。如果我用像href='#collapse1'和#collapse1.panel-collapse.collapse.in这样的静态id替换动态id，它会产生折叠效果，但只对那个id有效。

任何帮助都是非常感谢的。我是第一次接触jade和jquery，所以如果我忽略了什么，请原谅。

Answer 1

您需要将#accordion移出迭代器。并且每个面板的id需要是动态的。另外，我认为data-target=应该是#accordion。下面是一个有效的示例：

.col-xs-8
  #accordion.panel-group
  each product in products
    .panel-info(id="panel#{product.id}")
      .panel-heading
        h4.panel-title
          a(data-toggle='collapse', data-target='#accordion', href='#collapse#{product.id}') #{product.title}
      .panel-collapse.collapse.in(id="#collapse#{product.id}")
        .panel-body #{product.description}