我在我的网站上实现 jQuery UI 手风琴小部件时遇到了一些问题。
我列出一个标题,我不想能够重复/扩展。为此,我尝试使用 jQuery UI 手风琴小部件。
但由于某种原因它不起作用。
我有这个剃刀视图:
<div id="parameter_accordion">
<h3>Parameters</h3>
@foreach (var item in Model)
{
<div>
<p>@item.Name</p>
</div>
}
div 标签"指向"我的 JS 文件中的函数("配置应用程序.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>
但由于某种原因,视图没有显示为手风琴.它一直在推所有内容。谁能看到我做错了什么?
jquery 手风琴的一般 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>
因此,如果您只需要一个标头,则不应将div 放在 foreach 循环中,它应如下所示:
<h3><a href="#">Parameters</a></h3>
<div>
@foreach (var item in Model)
{
<p>@item.Name</p>
}
</div>
但是,如果您希望每个部分都有一个标题,则需要为每个唯一部分提供一个带有锚标记的<h3>
。因此,您应该在 foreach 循环中包含标记。它看起来像这样:
@foreach (var item in Model)
{
<h3><a href="#">@item.Name</a></h3>
<div>
<p>@item.Name</p>
</div>
}
还要注意的是,默认情况下手风琴不可折叠,您需要添加该选项以允许它完全折叠。
$("#parameter_accordion").accordion({ collapsible: true });
查看 jquery UI 手风琴的演示以获取更多信息。