2

サイトに jQuery UI アコーディオン ウィジェットを実装する際に問題が発生しています。

折りたたんだり展開したりしたくないという見出しを付けてリストします。このために、jQuery UI アコーディオン ウィジェットを使用しようとしています。

しかし、何らかの理由で機能していません。

私はこのかみそりのビューを持っています:

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

しかし、何らかの理由でビューがアコーディオンとして表示されていません。常にすべてのコンテンツを押し込んでいます。誰かが私が間違っていることを見ることができますか?

4

1 に答える 1

2

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>

したがって、ヘッダーが1つだけ必要な場合は、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 });

詳細については、jqueryUIアコーディオンのデモを確認してください。

于 2012-08-13T14:34:38.453 に答える