0

こんにちは、VS2008 と MVC2 を使用して jquery アコーディオン メニューを作成しています。

私の要件は、ユーザーがドロップダウンリストから項目を選択したときに、アコーディオンの内容を更新して再入力することです

このために、以下のようなタグとデータを返すjquery ajax呼び出しを使用しています

<h3>
  <a href="#">Masters</a>
</h3>
<div>
  <ul>
    <li>
      <a href="#" onclick="pageclick('..\TRAN\EmpMst.aspx',1)">Employee Master</a>
    </li>
    <li>
......
...

初めてページをロードすると、アコーディオンは問題なく表示されます。しかし、コンテンツを動的に変更するたびに、奇妙なCSSでひどく見えます

動的更新前後のアコーディオン

ここに私のajax呼び出しがあります

        $('#moduleList').change(function() {
            var rootPath = '<%=Url.Content("~/")%>';
            $.ajax({
                type: "POST",
                url: rootPath + "Home/GetMenu/",
                data: { moduleid: $(this).val() },
                success: function(result) {
                    $('#accordion').html(result);
                    //$('#accordion').append(result);
                    $('#accordion').accordion('destroy');
                    $('#accordion').accordion({
                        fillSpace: true, collapsible: true
                    });
                },
                error: function(error) { alert(error); }
            });

        });

私は何か間違っていますか？

4

5 に答える 5

2

accordion()ajax 成功ハンドラーで html を設定した後、もう一度呼び出してみてください。これにより、スタイルが再適用されます。

$("#accordion").accordion();
于 2012-04-04T19:59:27.163 に答える
1

これにはいくつかの原因が考えられます。考えられる原因の 1 つ: アコーディオン メニューのスタイリング (CSS クラスの追加など) に JavaScript を使用している場合、通常はページの読み込み時に実行されます。次に、ロードされたコンテンツを成功コールバックに設定した後、スタイリング関数を再度呼び出します。

于 2012-04-04T18:36:16.290 に答える
1

要素#accordionの (accordion() を呼び出す前の) html構造を、ajax 呼び出しの結果のhtmlと比較します。例えば：

accordion() を呼び出す前の html 構造:

<h3> <a href="#">Masters</a> </h3>
<div>
 <ul>
      <li><a href="#">Employee Master</a> </li>
  </ul>
</div>

ajax結果のhtml構造:

<div> //this may destroy your CSS
   <h3> <a href="#">Masters</a> </h3>
   <div>
     <ul>
       <li><a href="#">Employee Master</a> </li>
     </ul>
   </div>
</div>
于 2012-04-06T05:24:42.180 に答える
0

私は2つのステートメントを使用して問題を解決しました

$('#accordion').accordion('destroy');
$("#accordion").accordion();
于 2013-03-14T14:13:42.600 に答える
0

助けてくれてありがとう。私はついにそれを正しくしました。実際、私は少し CSS を見逃していました。

私のIEは、CSSを含むhtmlをまったく表示していませんでした。そのため、何かが変更されているかどうかを確認するのが困難でした。私の一日を救ったTuanに感謝します。Firebug の使用を開始すると、カスタム CSS が欠落していることは明らかでした。誰かが興味を持っている場合に備えて、更新されたコードを次に示します。

    $('#moduleList').change(function() {
        var rootPath = '<%=Url.Content("~/")%>';
        $.ajax({
            type: "POST",
            url: rootPath + "Home/GetMenu/",
            data: { moduleid: $(this).val() },
            success: function(result) {
                $('#accordion').html(result);
                //$('#accordion').append(result);
                $('#accordion').accordion('destroy');
                $('#accordion div').addClass('navMiddle');  // I missed this at first
                $('#accordion').accordion({
                    fillSpace: true, collapsible: true
                });
            },
            error: function(error) { alert(error); }
        });

    });

アコーディオン メニュー項目の CSS は次のとおりです。

.navMiddle{
 position:relative;
}
.navMiddle ul {
    margin:0px;
    padding:0px;
    text-align:left;
    list-style:none;
}
.navMiddle ul li {
    font-size:11px;
    color:#003366;
    font-weight:normal;
    white-space:nowrap;
    position:relative;
    border-bottom:dotted 1px gray;
    padding-top:4px;
    padding-bottom:4px;
}
.navMiddle ul li:hover {
    background-color:#e5effa;
}
.navMiddle ul li a:link {
    text-decoration:none;
    color:#003366;
}
.navMiddle ul li a:visited {
    text-decoration:none;
    color:#003366;
    margin-top:3px;
}
于 2012-04-06T22:23:41.467 に答える