我的jQuery脚本有问题。我正在尝试使用子菜单制作响应菜单。子菜单仅在mouseenter其父级时才会下降,但是一旦我调整屏幕大小(一旦小于1000),我需要停止此mouseenter功能。
我甚至尝试添加'j'变量并使其变为boleen。如果屏幕尺寸小于1000,则'j'设置为1.
var j = 0;
jQuery(document).ready(function(){
if(j==0){
console.log('enter function running');
jQuery('ul[class^="nav-child"]').hide();
jQuery('li[class^="item"]').one('mouseenter', function(){
jQuery(this).find('ul').find('a').append('<br>');
jQuery(this).find('ul').find('a').wrapAll('<div class="wrapper"></div>');
});
if(j==0){
jQuery('li[class^="item"]').mouseenter(function(){
console.log('first mouse enter / j = ' +j);
if(j==0){
jQuery(this).find('ul').fadeIn(0);
}
});
jQuery('li[class^="item"]').mouseleave(function(){
console.log('first mouse leave');
if(j==0){
jQuery(this).find('ul').fadeOut(0);
}
});
}
jQuery('li[class$="urrent"]').find('a').css('color', 'grey');
}
});
jQuery(window).resize(function(){
var screenWidth = jQuery(window).width();
console.log('j=1');
j = 1;
console.log(screenWidth);
if(screenWidth<1000){
console.log('if running');
console.log('hidden');
jQuery('.nav').find('li').css('float', 'none');
jQuery('.row-grey').css('height', 'auto');
jQuery('ul[class^="nav-child"]').show();
//jQuery('.wrapper').replaceWith('.wrapper-collapsed');
}else{
j=0;
console.log('else running');
jQuery('div[class$="ow-grey"]').children().show();
jQuery('.nav').find('li').css('float', 'left');
jQuery('ul[class^="nav-child"]').hide();
jQuery('li[class^="item"]').one('mouseenter', function(){
jQuery(this).find('ul').find('a').append(/*'<div class="stripe"></div>'*/'<br>');
jQuery(this).find('ul').find('a').wrapAll('<div class="wrapper"></div>');
});
if(j==0){
jQuery('li[class^="item"]').mouseenter(function(){
jQuery(this).find('ul').fadeIn(0);
console.log('mouseenter running');
});
jQuery('li[class^="item"]').mouseleave(function(){
console.log('mouseleave running');
jQuery(this).find('ul').fadeOut(0);
});
jQuery('li[class$="urrent"]').find('a').css('color', 'grey');
}
}
});
这是日志: here is the log
我特别不明白如何在日志中有j = 1,但if是说它应该只在j == 0
时运行提前谢谢