MVC4：JQueryui手风琴

我想在我的MVC4应用程序中用jqueryui创建一个简单的手风琴，但是...它不工作，手风琴没有显示。你能找出原因吗？我_layout框架：MVC4：JQueryui手风琴

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <meta charset="utf-8" /> 
     @Styles.Render("~/Content/bootstrap.min.css") 
     @Styles.Render("~/Content/bootstrap-responsive.min.css") 
     @Scripts.Render("~/bundles/modernizr") 
     @Styles.Render("~/Content/jquery-ui-1.9.2.custom.css") 
     <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $("#itemsList").accordion({ header: "h3" }); 
     </script> 
    </head>

我Products.cshtml观点：

@{ 
    ViewBag.Title = "Products"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
@section scripts{ 
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js") 

} 

<h2>Products</h2> 

<div class="container"> 
    <div class="row"> 
     <div id="itemsList" class="span3"> 
     @foreach (var item in Model) { 
      <h3>Room @item.Key</h3> 
      <div> 
      @foreach (var product in item.Value) { 
       <p>id : @product.product.PRODUCT_ID @Ajax.ActionLink("Details", "ProductDetails", new { id = product.product.PRODUCT_ID }, new AjaxOptions {UpdateTargetId = "itemDetails"})</p> 
      } 
      </div> 
     } 
     </div> 
     <span id="itemDetails" class="span9"> 
     </span> 
    </div> 
</div>

所以我想的项目列表中显示为一个手风琴。它不是因为twitter引导CSS而显示的方式吗？我已经从官方网站导入jqueryui css。谢谢！

编辑------------------------------------ 我现在已经厌倦了使用collapse在twitter引导中的类。一切工作正常但是......当我点击一个手风琴标题时，显示手风琴的内容，它正在做......除了在页面中移动（对应于myaddress/mypage＃idOfHeader）之外什么都没有。这是我的代码：

<div class="accordion" id="accordion2">  
     @foreach (var item in Model) { 
      <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#@item.Key"> 
         Room @item.Key 
        </a> 
       </div> 
      @foreach (var product in item.Value) { 
       <div id="@item.Key" class="accordion-body collapse in"> 
        <div class="accordion-inner"> 
         id : @product.product.PRODUCT_ID @Ajax.ActionLink("Details", "ProductDetails", new { id = product.product.PRODUCT_ID }, new AjaxOptions {UpdateTargetId = "itemDetails"}) 
        </div> 
       </div> 
      } 
      </div>   
     } 
    </div>

它似乎生成一个正确的网页，但手风琴播放不好。任何解释？

来源

2013-06-24 Derbie

为什么你没有使用Twitter崩溃：http://twitter.github.io/bootstrap/javascript.html#collapse？ –

我看到的一个可能的问题是，您正在使用版本为1.9.2的jQuery UI css文件，但是您使用的是jQuery UI版本1.8.20。

来源

2013-06-25 03:56:50 Jack

MVC4：JQueryui手风琴

回答

相关问题