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

请注意，我正在尝试根据分配的callasible-pane 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更改为'崩溃'，href ='＃cat'+ cat.key其中cat是项目对象（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

动态手风琴与玉无法正常工作

2 个答案:

测试：