私はjQueryを初めて使用し、480pxを超える画面幅ではliタグのマウスをホバーしてサブメニューを展開し、480px未満の幅ではliタグをクリックして展開する基本的なメニューシステムをコーディングしようとしましたサブメニュー。
メディア クエリを検出する Modernizr の機能の使用を含めようとしましたが、私の試みからわかるように、惨めに失敗します。
作業例。.....「Properties」という名前の li タグにカーソルを合わせます。
この問題は明らかに、ブラウザーを正しい幅で更新すると 480px を超えて 480px 未満で動作するため、コードが画面のサイズ変更を検出しないことに関係していますが、ブラウザーのサイズを変更すると、関数は引き続きトリガーされます!!
私のコード:
// Main nav dropdown animation
$(document).ready(function() {
function doneResizing() {
if(Modernizr.mq('screen and (min-width: 481px)')) {
$("#sub-menu").hide();
$("#show-investment-type-nav").hover(function() {
$(this).find("#sub-menu").stop(true, true).slideDown("fast");
}, function() {
$(this).find("#sub-menu").stop(true, true).fadeOut("fast");
});
}
else if(Modernizr.mq('screen and (max-width: 480px)')) {
$("#sub-menu").hide();
var next_move = "show";
$("#show-investment-type-nav").click(function() {
$('#sub-menu').slideToggle(100);
if (next_move === "show") {
$("body").addClass("nav-active");
$("#site-nav #icon").empty().html("");
$("#site-nav #nav-margin-down").animate({"margin-top": "163"}, 100);
next_move = "hide";
} else {
$("body").removeClass("nav-active");
$("#site-nav #icon").empty().html("");
$("#site-nav #nav-margin-down").animate({"margin-top": "0"}, 100);
next_move = "show";
}
});
}
}
var id;
$(window).resize(function() {
clearTimeout(id);
id = setTimeout(doneResizing, 0);
});
doneResizing();
});
なぜこれが起こっているのかについての助けは素晴らしいでしょう、それは私が学ぶのを助けるでしょう!!
乾杯!