Question

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

我列出一个标题，我不能折叠/扩展。为此我试图使用jQuery UI Accordion小部件。

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

我有这个剃刀观点：

<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>

但出于某种原因，该视图并未显示为手风琴。它一直推着所有内容。谁能看到我做错了什么？

Answer 1

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>

因此，如果您只想要一个标题，那么您不应该在foreach循环中使用div，它应该如下所示：

<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 });

查看demo for the jquery UI accordian了解详情。

Answer 2

使用bootstrap是此类开发的一个很好的工具，因为它可以很好地适应不同的环境。

问候......

带有MVC3的jQuery UI Accordion

2 个答案: