使用jquery 1.4.2的動態手風琴菜單

嗨，我正在使用VS2008和MVC2構建jquery手風琴菜單。使用jquery 1.4.2的動態手風琴菜單

我的要求是刷新手風琴的內容，並重新填充它，當用戶從下拉列表

選擇一個項目對於這個我使用jQuery的AJAX調用，它返回的數據和標籤，如下面

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

第一次在頁面加載手風琴看起來很好。但每當我動態地更改內容看起來awfull怪異CSS

Accordion Before & After Dynamic Update

這裏是我的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); } 
      }); 

     });

我做錯了什麼？

來源

2012-04-04 Deb

謝謝大家的幫助。我終於明白了。其實我錯過了一點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); } 
     }); 

    });

這裏是Accordion菜單項的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-06 22:23:41 Deb

這可能有幾個原因。這是一個可能的原因：如果您使用JavaScript進行樣式設置（添加CSS類等）您的手風琴菜單，並且通常在頁面加載時運行。然後在成功回調中設置加載的內容後再次調用樣式函數。

來源

2012-04-04 18:36:16 Kibria

Kibria我沒有使用任何腳本造型兩條語句的解決我的問題。然而我叫$（「＃accordion」）。accordion（）;從ajax成功，希望它會重新應用css和重建手風琴。它不工作.. – Deb 2012-04-05 17:08:50

在ajax成功處理程序中設置html之後，您可以再次嘗試調用accordion()。這應該重新應用樣式：

$("#accordion").accordion();

來源

2012-04-04 19:59:27

我不認爲OP是使用jQueryUI。 – Tuan 2012-04-04 20:09:05

我正在使用jQuery UI。我試着調用$（「＃accordion」）。accordion（）;在阿賈克斯成功，但沒有運氣。我也使用默認樣式。 – Deb 2012-04-05 17:06:18

對不起，誤會。如果在.html（result）之前調用.accordion（'destroy'）會怎麼樣？ – Tuan 2012-04-05 19:11:12

比較HTML元素#accordion與結果結構（調用手風琴（）之前）Ajax調用的HTML。例如：之前調用手風琴

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-06 05:24:42 Kibria

我通過使用如

$('#accordion').accordion('destroy'); 
$("#accordion").accordion();

來源

2013-03-14 14:13:42

使用jquery 1.4.2的動態手風琴菜單

回答

相關問題