Я хотел бы создать простой аккордеон с jqueryui в моем приложении MVC4, но ... Он не работает, аккордеон не отображается. Не могли бы вы понять, почему? Моих _layout рамки:MVC4: JQueryui accordion
<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 bootstrap css? Я импортировал jqueryui css с официального сайта. Благодаря !
EDIT ------------------------------------ Я теперь устал использовать крах классы в twitter bootstrap. Все работает отлично, но ... Когда я нажимаю на заголовок аккордеона, инсталлированный для показа содержимого аккордеона, он делает ... ничего, кроме движения на странице (в соответствии с 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>
Кажется, что создается правильная веб-страница, но аккордеон не играет хорошо. Любое объяснение?
Почему вы не использовали твиттер-крах: http://twitter.github.io/bootstrap/javascript.html#collapse? –