c# - 带有 MVC3 的 jQuery UI Accordion

Question

我在我的站点上实现 jQuery UI Accordion 小部件时遇到了一些问题。

我列出了一个无法折叠/展开的标题。为此，我正在尝试使用 jQuery UI Accordion 小部件。

但由于某种原因它不起作用。

我有这个 Razor View :

<div id="parameter_accordion">
<h3>Parameters</h3>

    @foreach (var item in Model)
    {
        <div>
            <p>@item.Name</p>
        </div>    
    }

div 标签“指向”我的 JS 文件(“ConfigApplication.js”)中的函数:

$("#parameter_accordion").accordion();

我将此文件连同 _Layout.cshtml 中的所有 Jquery 文件一起导入:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ConfigApplication.js")" type="text/javascript"></script>

但由于某种原因，该 View 未显示为 Accordion 。它一直在推送所有内容。谁能看出我做错了什么？

Answer 1

jquery Accordion 的通用 html 遵循以下标准:

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

因此，如果您只需要一个 header ，那么您不应该在 foreach 循环中包含 div，它应该如下所示:

<h3><a href="#">Parameters</a></h3>

<div>
    @foreach (var item in Model)
    {
        <p>@item.Name</p>
    }
</div>  

但是，如果您想要每个部分的标题，您需要有一个 <h3>每个独特的部分都有一个 anchor 标记。所以你应该在 foreach 循环中包含标签。它看起来像这样:

@foreach (var item in Model)
{
    <h3><a href="#">@item.Name</a></h3>
    <div>
        <p>@item.Name</p>
    </div>    
}

另请注意， Accordion 默认情况下不可折叠，您需要添加该选项才能使其完全折叠。

$("#parameter_accordion").accordion({ collapsible: true });

查看 demo for the jquery UI accordion获取更多信息。