0

jQuery Toggleは伝播を壊しますか?

私の問題は、レスポンシブ メニューを作成していて、ブラウザーのサイズを変更して、私が持っている唯一のブレークポイントの幅に合わせることです。jQuery の Toggle 関数が伝播を中断します。

例を次に示します: http://www.stlredtails.com/construction

ブラウザのサイズを 1024 ピクセル以下に変更する場合は、上部の [ナビゲーション] ボタンをクリックし、メニューが表示されたら [連絡先] リンクをクリックしてみてください。伝播せず、ブラウザのサイズを 1024px 以上に変更すると... 連絡先リンクは伝播します。スライドの切り替えでこの問題が発生したことを思い出しません。

また、ブラウザのサイズを 1024px 以下に変更した場合も同様です。ナビゲーション ボタンをクリックすると、イベントが発生するようにページを更新する必要がありますか? jQueryのトグルもこれを壊しますか?

以下のjQuery:

    if((window.outerWidth && window.outerWidth > 1024) || (document.body.clientWidth && document.body.clientWidth > 1024)){
        jQuery(".navigation > ul > li").hoverIntent(
            function() {
               jQuery(this).children('ul').slideDown();
            },
            function(){
               jQuery(this).children('ul').slideUp();
            }
        );
        jQuery(".navigation > ul > li > ul").hover(
            function() {
               jQuery(this).children('ul').show();
            },
            function() {
               jQuery(this).children('ul').hide();
            }
        );
    }
    if((window.outerWidth && window.outerWidth <= 1024) || (document.body.clientWidth && document.body.clientWidth <= 1024)){
        jQuery(".navigation > ul > li > a").each( function() {
            if(jQuery(this).siblings("ul").length) {
                jQuery(this).removeAttr("href");
            }
        });
        jQuery(".navigation > span > a#navigation").toggle(
            function() {
               jQuery(this).parent().siblings("ul").css("display", "block");
            },
            function() {
               jQuery(this).parent().siblings("ul").css("display", "none");
            }
        );
        jQuery(".navigation > ul > li > a").toggle(
            function() {
               jQuery(this).siblings("ul").css("display", "block");
            },
            function() {
               jQuery(this).siblings("ul").css("display", "none");
            }
        );
    }

助言がありますか?

ありがとうございました!

4

0 に答える 0