Question

您好我正在使用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

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

        });

我做错了什么？

Answer 1

您可以在ajax成功处理程序中设置html后再次尝试调用accordion()。这应该重新应用样式：

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

Answer 2

这可能有几个原因。这是一个可能的原因：如果您使用JavaScript进行样式设置（添加CSS类等）您的手风琴菜单，并且通常在页面加载时运行。然后在成功回调中设置加载的内容后再次调用样式函数。

Answer 3

将 html （在调用accordion（）之前）元素 #acordion 的结构与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>

Answer 4

感谢大家的帮助。我终于做对了。其实我错过了一点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;
}

Answer 5

我通过使用两个语句

解决了我的问题

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

使用Jquery 1.4.2的Dynamic Accordion菜单

5 个答案: