Question

目前我有一个代码，我需要在具有动态生成的ID的Jade文件中使用手风琴效果。这是我到目前为止所拥有的 -

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。

感谢任何帮助。我是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}

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

1 个答案: