带MVC3的jQuery UI手风琴

Im在我的网站上实现一个jQuery UI Accordion小部件时遇到了一些问题。带MVC3的jQuery UI手风琴

我列出一个标题，我不能够colapse /展开。为此即时通讯尝试使用jQuery UI Accordion小部件。

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

我有这样的Razor视图：

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

但由于某种原因，该视图并未显示为手风琴。它一直在推销所有内容。任何人都可以看到我做错了什么？

来源

2012-08-13 Mikkel Nielsen

为一个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循环内的股利，它应该是这样的：

<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了解更多信息。

来源

2012-08-13 14:34:38

@Mikkel Nielsen如果这解决了您的问题，请接受答案，否则，我可以有更新吗？ – 2012-08-15 15:46:33

-2

使用引导程序对于这种类型的开发来说是一个很好的工具，因为它可以很好地适应不同的环境。

问候...

来源

2014-04-28 18:10:51 user3582508

你能否解释一下“bootstrap”是什么以及它如何帮助海报，也许可以提供一个参考来扩展你的答案。 – 2014-04-28 18:36:57

带MVC3的jQuery UI手风琴

回答

相关问题