jQuery动画-内容被困在IE 7、8、9中

我正在使用jQuery和jQueryUI为我正在处理的项目创建一个导航菜单，我在InternetExplorer中遇到了一个关于jQuery动画的奇怪问题。代码查找嵌套在特定顺序（li ul li a或li ul li h3）中的标记，并向标记添加一个类，该类用于切换内容可见性。我使用的jQuery代码可以在这里看到：

(function ($) {
$.fn.menuLocator = function (options1) {
    var defaults = {

    };

    var options = $.extend(defaults, options1);

    return this.each(function () {
        var menu = this;
        var basePath = window.location.href.split(window.location.host)[1];
        var paths = basePath.split('.html').join('').split('/');
        for (var i = 1; i != paths.length; i++) {
            $(menu).find('a[href$="' + paths[i] + '"]').addClass('active').addClass('level_' + i).parent().find('ul:first').addClass('active');
            $('a.active').find('.has_children:first').addClass('open');
        }
        $(menu).find('li ul').parent().find('a:first').append('<span class="has_children"><span class="icon"></span></span>');

for (var i = 1; i != paths.length; i++) {
            $(menu).find('a[href$="' + paths[i] + '"]').addClass('active').addClass('level_' + i).parent().find('li h3').addClass('active');
            $('h3.active').find('.has_children').addClass('open');
        }


        $(menu).find('li ul').parent().find('h3').append('<span class="has_children"><span class="icon"></span></span>');


        $(menu).find('.has_children').toggle(

        function () {
            var is_old_ie = false;
            var speed = 200;

            if($.browser.msie){
                is_old_ie = true;
            }

            if(is_old_ie){
                speed = 1;
            }

            $(this).parent().parent().addClass('active');
            $(this).parent().next('ul').slideToggle(speed);
            $(this).toggleClass('open');
        },

        function () {
            var is_old_ie = false;
            var speed = 200;

            if($.browser.msie){
                is_old_ie = true;
            }

            if(is_old_ie){
                speed = 1;
            }

            $(this).prevAll(":has(.active):first").removeClass('active');
            $(this).parent().next('ul').slideToggle(speed);
            $(this).toggleClass('open');
        });
    });
};
}(jQuery));

（函数（$）{
$.fn.menuLocator=函数（选项1）{
var默认值={
};
var options=$.extend（默认值，options1）；
返回此。每个（函数（）{
var菜单=这个；
var basePath=window.location.href.split（window.location.host）[1]；
var path=basePath.split（'.html'）.join（''）.split（'/'）；
for（var i=1；i！=path.length；i++）{
$（菜单）.find（'a[href$=“'+路径[i]+'”）.addClass（'active'）.addClass（'level_'+i）.parent（）.find（'ul:first'）.addClass（'active'）；
$（'a.active'）.find（'.has_children:first'）.addClass（'open'）；
}
$（menu.find（'li ul'）.parent（）.find（'a:first'）.append（“”）；
for（var i=1；i！=path.length；i++）{
$（菜单）.find（'a[href$=“'+路径[i]+'”）.addClass（'active'）.addClass（'level_'+i）.parent（）.find（'li h3'）.addClass（'active'）；
$（'h3.active'）.find（'has_children'）.addClass（'open'）；
}
$（菜单）.find（'li-ul'）.parent（）.find（'h3'）.append（''）；
$（菜单）.find（'.has_children'）。切换(
函数（）{
var为旧的ie=false；
无功转速=200；
如果（$.browser.msie）{
是真的吗；
}
如果（是旧的）{
速度=1；
}
$（this.parent（）.parent（）.addClass（'active'）；
$（this）.parent（）.next（'ul'）.slideToggle（速度）；
$（this.toggleClass（'open'）；
},
函数（）{
var为旧的ie=false；
无功转速=200；
如果（$.browser.msie）{
是真的吗；
}
如果（是旧的）{
速度=1；
}
$（this.prevAll（“：has（.active）：first”）.removeClass（'active'）；
$（this）.parent（）.next（'ul'）.slideToggle（速度）；
$（this.toggleClass（'open'）；
});
});
};
}（jQuery））；

在Chrome、Firefox、Safari和Opera中，一切都很好。但在IE（7、8、9）中，我遇到了以下错误：

导航最初显示良好：

当用户单击图标时，每个部分都会展开以显示子导航：

但是，当您关闭打开部分正上方的部分时，内容不会上移以匹配菜单

如果您打开并关闭上面的部分，它将继续向下推送内容，但不会向上推送内容

关闭并重新打开子菜单将导致内容重置。打开子菜单中的项目会导致内容按预期上下移动

使用以下HTML创建菜单：

<!-- Left zone -->
<div class = "zoneLeft" style = "float: left;" >
<div class = "leftColumn" >

<ul class = "menu" >
    <li>
        <a> In This Section < /a>
        <ul id="menuElem">
            <li><a href="/Legal / Sunshine - Laws / Open - Government / Your - Rights - to - an - Open - and - Accountable - Government " >Your Rights to an Open and Accountable Government</a></li>
        </ul>
    </li>
    <li>
        <a>Related</a>
        <ul>
            <li><a href=" / About - AG / Contact ">Contact</a></li><li><a href=" / Legal / Sunshine - Laws / Sign - Up - For - Updates - to - ohio - s - Sunshine - Laws ">Sign Up For Updates to Ohio&#39;s Sunshine Laws</a></li>
            <li><a href=" / FAQ / Sunshine - laws - FAQs ">Sunshine Laws FAQs</a></li><li><a href=" / Legal / Sunshine - Laws / Sunshine - Laws - Publication - Request - Form ">Sunshine Laws Publication Request Form</a></li>
            <li><a href=" / Legal / Sunshine - Laws / Sunshine - Law - Training ">Sunshine Laws Training</a></li>
        </ul>
    </li>
    <li>
        <a>Publications</a>
        <ul id="p_lt_zoneContent_pageplaceholder1_pageplaceholder1_lt_zoneLeft_TagDisplayPublications_BListTagged " class="subCMSListMenuUL ">
            <li><a href=" / Files / Publications / Publications -for -Legal / Sunshine - Laws / 2012 - Sunshine - Laws - Manual.aspx ">2012 Sunshine Laws Manual</a></li>
            <li><a href=" / Files / Publications / Publications - for -Legal / Sunshine - Laws / Appendix - A - % e2 % 80 % 93 - Statutes - Public - Records, - Open - Meeting.aspx ">Appendix A – Statutes: Public Records, Open Meetings &amp; Personal Information Systems Act</a></li>
            <li><a href=" / Files / Publications / Publications - for -Legal / Sunshine - Laws / Appendix - B - % e2 % 80 % 93 - Statutory - Excepting - Records - from - the.aspx">Appendix B – Statutory Excepting Records from the Ohio Public Records Act or Declaring Records</a></li>
            <li><a href=" / Files / Publications / Publications - for -Legal / Sunshine - Laws / Appendix - C - % e2 % 80 % 93 - Ohio - Attorney - General - Opinions - Interp.aspx ">Appendix C – Ohio Attorney General Opinions Interpreting Ohio’s Public Records Act</a></li>
            <li><a href=" / Files / Publications / Publications - for -Legal / Sunshine - Laws / Appendix - D - % e2 % 80 % 93 - Ohio - Attorney - General - Opinions - Interp.aspx ">Appendix D – Ohio Attorney General Opinions Interpreting Ohio’s Open Meetings Act</a></li>
            <li><a href=" / Files / Publications / Publications - for -Legal / Sunshine - Laws / Model - Public - Records - Policy.aspx ">Model Public Records Policy</a></li>
        </ul>
    </li>
</ul>
</div>
</div>

---

欢迎提出任何意见。谢谢

在我发布这个问题的解决方案之前，让我先说一句，我知道这是修复这个bug的一种糟糕的方法。这个问题只出现在几页上，我们决定在后期制作中解决它。希望这不是最终的解决办法

话虽如此，我通过在面板关闭时触发单击事件修复了动画问题。由于面板中的内容在关闭和重新打开时会重置，因此我使用以下代码在活动部分之后的每个部分上触发两个单击事件（关闭/重新打开）。在IE中，动画持续时间无论如何设置为0毫秒，因此此内容重置对用户不可见。此外，性能损失最小，因为如果面板打开，则内容已经呈现，无需重新加载

$(menu).find('.has_children').toggle(

        function() {
            var speed = 200;

            if ($.browser.msie) {
                speed = 0;
            }

            $(this).parent().parent().addClass('active');
            $(this).parent().next('ul').slideToggle(speed);
            $(this).toggleClass('open');
        },

        function() {
            var speed = 200;

            if ($.browser.msie) {
                speed = 0;
            }

            $(this).parent().parent().removeClass('active');
            $(this).parent().next('ul').slideToggle(speed);
            $(this).toggleClass('open');

            /* IE7 Nav Push Bug Fix */
            if ( $.browser.msie && $.browser.version.slice(0,1) == "7" ) {
                $(this).parent().parent().nextAll().children('a').children().children().trigger('click');
                $(this).parent().parent().nextAll().children('a').children().children().trigger('click');
            }
            /* End */
        });

---

为什么不使用jQueryUI的Accordion特性呢？基本实现是由我们合作的设计师提供的。由于缺乏更好的解决方案，我可能会尝试使用手风琴实现导航。我们正在使用的CMS限制了一些功能，但希望它可以工作。