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");
}
);
}
助言がありますか?
ありがとうございました!