帶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手風琴

回答

相關問題