1

jQuery と jQuery-UI を使用して、現在取り組んでいるプロジェクトのナビゲーション メニューを作成していますが、Internet Explorer の 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));

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

この問題に対する私の解決策を投稿する前に、これがこのバグを修正するひどい方法であることを認識していると言って前置きさせてください。この問題は数ページでのみ発生し、ポストプロダクションで修正することにしました。これが最終的な解決策にならないことを願っています。

そうは言っても、パネルが閉じられたときにクリックイベントをトリガーすることで、アニメーションの問題を修正しました。パネルを閉じて再度開くと、パネルのコンテンツがリセットされるため、次のコードを使用して、アクティブなセクションに続く各セクションで 2 つのクリック イベント (閉じる/再度開く) をトリガーしました。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 に答える