具有动态添加的部分视图的部分视图的Bootstrap Accordion问题

Question

我在使用动态生成的局部视图的局部视图上实现bootstrap手风琴时遇到问题。由于某种原因手风琴 当我点击图标折叠它时不会崩溃 - 相反它没有折叠它只是将li标签的背景变成蓝色。

我的部分视图如下所示：

   <li class="thesection" id="accordion">
            <div class="row">
                    <div class="col-md-12">
                            <h2><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> Section</h2>
                            <div class="col-md-4">
                                <div class="input-group">
                                    <span class="input-group-addon">Section Name</span>
                                    @Html.TextAreaFor(t => t.SectionName, new { @class = "form-control" })
                                    @Html.HiddenFor(t => t.IndexOrder)
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group">
                                    <span class="input-group-addon">Section Guide</span>
                                    @Html.TextAreaFor(t => SectionGuide, new { @class = "form-control" })
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group">
                                    <button type="button" class="btn btn-danger" value="delete">Delete Section</button>
                                </div>
                            </div>
                            @Html.Partial("AreaSectionItemsPartial", Model.TemplateCompanySectionItems)

                    </div>
         </div>
    </li>

父视图上的onpageload函数如下所示：

$(document).ready(function () {
        $('#accordion').accordion({
            collapsible:true
        })
}); 

为什么我的手风琴没有反应？我是否需要修改我的视图布局？任何帮助都会很棒。

提前致谢