使用Jquery 1.4.2的动态手风琴菜单

您好，我正在使用VS2008和MVC2构建一个jquery手风琴菜单

我的要求是刷新手风琴的内容，并在用户从dropdownlist中选择项目时重新填充它

为此，我使用jqueryajax调用，它返回带有和标记的数据，如下所示

<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); }
            });

        });

$（'#moduleList'）。更改（函数（）{
var rootPath=''；
$.ajax({
类型：“POST”，
url:rootPath+“Home/GetMenu/”，
数据：{moduleid:$（this.val（）}，
成功：功能（结果）{
$（'#accordion'）.html（结果）；
//$（'#accordion'）。追加（结果）；
$（'手风琴'）。手风琴（'销毁'）；
$（'手风琴'）。手风琴({
填充空间：真，可折叠：真
});
},
错误：函数（错误）{警报（错误）；}
});
});

---

我做错什么了吗？

可能有几个原因。以下是一个可能的原因： 如果您使用JavaScript进行样式设置（添加CSS类等），您的手风琴菜单通常在页面加载时运行。

---

然后在成功回调中设置加载的内容后再次调用样式设置函数。

这可能有几个原因。以下是一个可能的原因： 如果您使用JavaScript进行样式设置（添加CSS类等），您的手风琴菜单通常在页面加载时运行。

---

然后在成功回调中设置加载的内容后再次调用样式函数。

在ajax成功处理程序中设置html后，可以尝试再次调用

accordio（）。这将重新应用样式：

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

在ajax成功处理程序中设置html后，可以再次尝试调用
accordion（）
。这将重新应用样式：

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

将元素#accordion的html（在调用accordion（）之前）结构与ajax调用的结果html进行比较。例如：

调用accordio（）之前的html结构：






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>

//这可能会破坏您的CSS



将元素#accordion的html（在调用accordion（）之前）结构与ajax调用的结果html进行比较。例如：

调用accordio（）之前的html结构：






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>

//这可能会破坏您的CSS



谢谢大家的帮助。我终于弄对了。实际上我错过了一点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

我的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').accordion('destroy');
$("#accordion").accordion();

我用两个语句作为答案解决了我的问题

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

我不认为OP使用的是jQueryUI，我使用的是jQueryUI。我试着打电话给$（“#accordion”）.accordion（）；关于ajax的成功，但没有运气。我也使用默认样式。很抱歉误解。如果您在.html（结果）之前调用.accordion（'destroy'），会怎么样？无论我在分配html之前和之后调用.accordion（'destroy'）多少次，标记部分都只呈现为纯html。您是否使用Firebug来比较应用于元素之前和之后的样式？我认为OP没有使用jQueryUI。我使用的是jquery ui。我试着打电话给$（“#accordion”）.accordion（）；关于ajax的成功，但没有运气。我也使用默认样式。很抱歉误解。如果您在.html（结果）之前调用.accordion（'destroy'），会怎么样？无论我在分配html之前和之后调用.accordion（'destroy'）多少次，标记部分仅呈现为纯html。您是否使用Firebug来比较应用于元素之前和之后的样式？Kibria我没有使用任何脚本进行样式设置。但是我叫$（“#手风琴”）。手风琴（）；从ajax的成功，希望它将重新应用css和重建手风琴。它不工作..Kibria我没有使用任何脚本的样式。但是我叫$（“#手风琴”）。手风琴（）；来自ajax的成功，希望它能重新应用css并重建手风琴。它不起作用。。