使用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的动态手风琴菜单

回答

相关问题