javascript - 动态地将面板添加到 Bootstrap 3 Accordion

Question

我正在尝试将 Bootstrap 3 面板动态添加到 Accordion 中。我的(相关)代码如下:

<div class="panel-group" id="queues-accordion">
</div>

和JS代码:

$("#addqueuebutton").on("click",function(){
    var queue = '<div class="panel panel-default">';
    queue += '<div class="panel-heading">';
    queue += '<h4 class="panel-title">';
    queue += '<a data-toggle="collapse" data-parent="queues-accordion" href="collapse1">' + $('#queuename').val() + '</a>';
    queue += '</a>';
    queue += '</h4>';
    queue += '</div>';
    queue += '<div id="collapse1" class="panel-collapse collapse in">';
    queue += '<div class="panel-body">' + This is a test + '</div>';
    queue += '</div>';
    queue += '</div>';
    $('#queues-accordion').append(queue);
})

我遵循了本指南 - Add dynamic closed panels in Bootstrap 3 accordion ，但我没有让面板出现在页面上。谁能指出我的错误？

Answer 1

下面一行是无效的

queue += '<div class="panel-body">' + This is a test + '</div>';

This is a test 是一个字符串，应该像字符串一样添加。 Javascript 会将其解释为变量(同样无效)。

像这样的东西应该可以代替

queue += '<div class="panel-body">This is a test</div>';

或将This is a test存储为变量并将其连接起来

var test = 'This is a test';
queue += '<div class="panel-body">' + test + '</div>';