1

我正在使用 jQuery 和 jQuery-UI 为我正在处理的项目制作导航菜单，并且在 Internet Explorer 中的 jQuery 动画存在一个奇怪的问题。代码找到一个按特定顺序嵌套的标签（li ul li a OR 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));

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

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

4

1 回答 1

0

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

话虽如此，我通过在面板关闭时触发点击事件来修复动画问题。由于面板中的内容在关闭和重新打开时会重置，因此我使用以下代码在活动部分之后的每个部分上触发两个点击事件（关闭/重新打开）。在 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 */
        });
于 2012-08-24T14:23:34.610 回答