动态添加新面板到bootstrap手风琴

Question

我写了一个函数来动态添加新面板到bootstrap手风琴 它的工作

我的问题是面板体显示倒置 见下图

当我在jsfiddle中尝试相同的代码时，它工作正常 https://jsfiddle.net/Eadhassan/aqpbzcex/1/

这是我的HTML代码：

<button class="btn btn-default btn-block addPanel" type="button">Add panel</button>
<div class="panel-group panels" id="accordion" role="tablist" aria-multiselectable="false"></div>

这是我的jQuery代码：

<script type="text/javascript">
    $('.addPanel').click(function() {
        var x = $('.panels .panel').length+1;
        var template = '<div class="panel panel-primary">';
        template += '<div class="panel-heading" role="tab">';
        template += '<h4 class="panel-title">';
        template += '<a data-toggle="collapse" href="#' + x + '" aria-expanded="false" aria-controls="collapseOne">Panel ' + x + '</a>';
        template += '<a id="removeSlide" style="cursor: pointer" class="pull-right" data-toggle="tooltip" data-placement="top" title="Delete this"><i class="fa fa-lg fa-trash"></i></a>';
        template += '</h4></div>';
        template += '<div id="' + x + '" class="panel-collapse collapse" role="tabpanel"><div class="panel-body">';

        // Title
        template += '<div class="form-group">';
        template += '<div class="row">';
        template += '<label class="form-label col-md-5" for="slideTitle">title</label>';
        template += '<div class="col-md-7">';
        template += '<input type="text" name="sliderSource[' + x + '][slideTitle]" id="slideTitle" class="form-control">';
        template += '</div></div></div>';

        // Description
        template += '<div class="form-group">';
        template += '<div class="row">';
        template += '<label class="form-label col-md-5" for="slideTitle">Description</label>';
        template += '<div class="col-md-7">';
        template += '<textarea name="sliderSource[' + x + '][slideTitle]" id="slideTitle" class="form-control"></textarea>';
        template += '</div></div></div>';

        // Close open tags
        template += '</div></div></div>';

        $('.panels').append( template );
    });
</script>

任何人在

之前都有这个问题

Answer 1

我解决了我的问题 它在css文件中是旋转折叠按钮的一个角色 非常感谢@ Mohamed-Yousef