jQuery动画 - 内容陷入IE 7,8,9

Question

我正在使用jQuery和jQuery-UI为我正在处理的项目制作导航菜单，并且我在Internet Explorer中遇到了一个奇怪的问题。代码找到一个嵌套的标签，按照特定的顺序排列（或者是一个或多个），并在标签中添加一个类，用于切换内容的可见性。我正在使用的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));

在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>

任何想法都表示赞赏。谢谢！

Answer 1

在我发布这个问题的解决方案之前，让我先说明我知道这是修复这个bug的一种可怕的方法。该问题仅发生在几页上，我们决定在后期制作中修复它。希望这不是最终解决方案。

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

$(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 */
        });