当屏幕小于1000时停止jquery功能

时间:2016-05-25 07:57:58

标签: javascript jquery html css

我的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

时运行

提前谢谢

0 个答案:

没有答案