Jade 的动态手风琴不起作用

Question

我正在尝试创建如下所示的动态手风琴：

#accordion.panel-group
each item in session.intents
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}

    #collapse#{item}.panel-collapse.collapse
      .panel-body
        .col-lg-6
          // blah blah

请注意，我正在尝试根据分配给它的可调用窗格 ID 动态打开特定面板：

                  #collapse#{item}.panel-collapse.collapse

当我在浏览器上运行时，我看到这个错误：

  53|                         h4.panel-title
  54|                           a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}
> 55|                       #collapse#{item}.panel-collapse.collapse
  56|                         .panel-body
  57|                           .col-lg-6
  58|                             .my-form

  Unexpected token `interpolation` expected `text`, `code`, `:`, `newline` or `eos`
     at Parser.tag (/home/shubham/workspace/EVA2.0_bootstrap/node_modules/jade/lib/parser.js:828:15)

我错过了什么？

Answer 1

这不是有效的 JADE 语法。

如果你想这样写你就必须这样写

div(id="collapse#{item}").panel-collapse.collapse

您的代码将如下所示：

#accordion.panel-group
each item in session.intents
  .panel.panel-default
    .panel-heading
      h4.panel-title
        a(data-toggle='collapse', data-parent='#accordion', href='#collapse' + item) #{item}

    div(id="collapse#{item}").panel-collapse.collapse
      .panel-body
        .col-lg-6
          // blah blah

测试：

Codepen

Answer 2

我认为这是 Jade 的问题，当我将 href 更改为使用 ID 链接到 div 时，它对我来说工作正常，所以在 a.accordion-toggle(data-toggle='collapse', href='#cat'+cat.key) 把href改成collapse', href='#cat'+cat.key 其中cat是item对象（Category对象），还有class "class="panel-collapse collapse" 应该在 div () 内部而不是外部以正确的方式加载

div(id="cat"+cat.key class="panel-collapse collapse").in



ul.nav.nav-pills.nav-stacked
                    each cat in categories
                        ul.nav.nav-pills.nav-stacked
                        li(class='active')
                            a.accordion-toggle(data-toggle='collapse', href='#cat'+cat.key)
                                p.large.pull-right= cat.name
                                    p
                                        | <br/>
                        div(id="cat"+cat.key class="panel-collapse collapse").in
                            .panel-body
                                ul.nav.nav-pills.nav-stacked
                                if cat.subcategories.length
                                    each sub in cat.subcategories
                                        ul.nav.nav-pills.nav-stacked
                                        li(role="presentation" class='active')
                                        a.accordion-toggle(href='/blog/' +cat.key+'/'+sub.key+'/sub')
                                            p.pull-right= sub.name

Jade 的动态手风琴不起作用

Dynamic accordion with Jade not working

jquery

html

pug

accordion

jquery-ui-accordion

测试：