MVC4:JQueryui手风琴

我想在我的MVC4应用程序中用jqueryui创建一个简单的手风琴，但是。。。它坏了，手风琴不响了。你能找出原因吗？ 我的布局框架：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        @Styles.Render("~/Content/bootstrap.min.css")
        @Styles.Render("~/Content/bootstrap-responsive.min.css")
        @Scripts.Render("~/bundles/modernizr")
        @Styles.Render("~/Content/jquery-ui-1.9.2.custom.css")
        <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")" type="text/javascript"></script>
        <script type="text/javascript">
            $("#itemsList").accordion({ header: "h3" });
        </script>
    </head>

@style.Render（“~/Content/bootstrap.min.css”）
@style.Render（“~/Content/bootstrap responsive.min.css”）
@Scripts.Render（“~/bundles/modernizer”）
@style.Render（“~/Content/jquery-ui-1.9.2.custom.css”）
$（“#itemsList”）.accordion（{标题：“h3”}）；

My Products.cshtml视图：

@{
    ViewBag.Title = "Products";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts{
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")

}

<h2>Products</h2>

<div class="container">
    <div class="row">
        <div id="itemsList" class="span3">
        @foreach (var item in Model) {
            <h3>Room @item.Key</h3>
            <div>
            @foreach (var product in item.Value) {
                <p>id : @product.product.PRODUCT_ID @Ajax.ActionLink("Details", "ProductDetails", new { id = product.product.PRODUCT_ID }, new AjaxOptions {UpdateTargetId = "itemDetails"})</p>
            }
            </div>
        }
        </div>
        <span id="itemDetails" class="span9">
        </span>
    </div>
</div>

@{
ViewBag.Title=“产品”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
@节脚本{
@Scripts.Render（“~/Scripts/jquery.unobtrusiveajax.min.js”）
}
产品
@foreach（模型中的var项目）{
房间@item.Key
@foreach（项目价值中的var产品）{
id:@product.product.product_id@Ajax.ActionLink（“详细信息”，“产品详细信息”，新的{id=product.product.product_id}，新的AjaxOptions{UpdateTargetId=“itemDetails”}）

}
}

因此，我希望项目列表显示为手风琴。它不是因为twitter引导css而以这种方式显示的吗？ 我已经从官方网站导入了jqueryui css。谢谢

编辑------------------------------------ 我现在已经厌倦了在twitter引导中使用collapse类。一切正常，但。。。当我点击一个手风琴标题，而不是显示手风琴的内容，它正在做。。。除了页面中的移动（与myaddress/mypage#idOfHeader相对应）外，没有其他内容。这是我的密码：

<div class="accordion" id="accordion2">     
        @foreach (var item in Model) {
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#@item.Key">
                        Room @item.Key
                    </a>
                </div>
            @foreach (var product in item.Value) {
                <div id="@item.Key" class="accordion-body collapse in">
                    <div class="accordion-inner">
                        id : @product.product.PRODUCT_ID @Ajax.ActionLink("Details", "ProductDetails", new { id = product.product.PRODUCT_ID }, new AjaxOptions {UpdateTargetId = "itemDetails"})
                    </div>
                </div>
            }
            </div>         
        }
    </div>

@foreach（模型中的var项目）{
@foreach（项目价值中的var产品）{
id:@product.product.product_id@Ajax.ActionLink（“详细信息”，“产品详细信息”，新的{id=product.product.product_id}，新的AjaxOptions{UpdateTargetId=“itemDetails”}）
}
}

---

它似乎生成了正确的网页，但手风琴演奏得不好。有什么解释吗？

我看到的一个可能的问题是，您使用的是版本为1.9.2的jquery UI css文件，但您使用的是版本为1.8.20的jquery UI JS

为什么不使用twitter崩溃：？