窗口大小調整不起作用

我有一個菜單，當懸停在990px以上時，它會打開菜單，但當它下面時，菜單會變成漢堡菜單，您需要將其打開。問題是我想在990像素以下時停用懸停。這僅適用於窗口在990像素以下打開的情況。如果它在990像素以上開始並減少到990像素以下，那麼窗口會在990像素標記上方打開窗口後保持懸停狀態。我試圖給它添加一個resize（），但它似乎不起作用。窗口大小調整不起作用

jQuery(function($) { 
    if ($(window).width() >= 992) { 
     $('.navbar .dropdown').hover(function() { 
      $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); 
     }, function() { 
      $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp(); 
     }); 
    }else if ($(window).width <= 992) { 
       $('.navbar .dropdown').off('mouseenter'); 
      } 
});

現在，當窗口調整大小時，無論如何都會禁用懸停。

來源

2016-08-19 Keith

這是什麼代碼'（$（窗口）.resize（）<990）'點？你是否缺少'if'，你不應該使用'.width（）'？ '$（window）.resize（）'接受一個事件監聽器函數。 – jfriend00

如果我使用一個寬度它詢問什麼時候窗口打開不是當它調整大小 – Keith

我知道這是潛在的主題，但你有沒有嘗試過使用CSS斷點和css3動畫來做這個工作？ – jedifans

這是我想出了和它的作品以供將來參考：

jQuery(function ($) { 
    if ($(window).width() > 992) { 
     $('.navbar .dropdown').hover(function (e) { 
      $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); 

     }, function() { 
      $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp(); 

     }); 

     $('.navbar .dropdown > a').click(function() { 
      location.href = this.href; 
     }); 
    } 

    $(window).resize(function() { 
     var win = $(window).width(); 
     if (win >= 992) { 
      $('.navbar .dropdown').hover(function() { 
       $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); 
      }, function() { 
       $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp(); 
      }); 
      // this takes off the hover event if using on desktop 
     } else if (win < 992) { 
      $('.navbar .dropdown').off('mouseenter'); 
     } 
    }); 
});

來源

2016-08-23 17:09:12 Keith

您正在使用錯誤，因爲$(window).resize();是在窗口大小發生更改且未返回數字時觸發的事件。這裏是.resize()

($(window).resize() < 990) 
    $('.navbar .dropdown > a').click(function() { 
     location.href = this.href; 
    }); 
}

變化的一個很好的解釋post這個

else if($(window).width() <990){ 
    $('.navbar .dropdown > a').click(function() { 
     location.href = this.href; 
    }); 
}

或者只是

else{ 
    $('.navbar .dropdown > a').click(function() { 
     location.href = this.href; 
    }); 
}

來源

2016-08-19 20:34:13

這也假設你在其他地方有一個調整大小的函數，調用這個函數的答案修改。 –

是的，他應該有一個resize事件，並且在resize函數中，他應該調用他在此處發佈的所有代碼以及我在answe中編寫的修復:) –

你也應該在resize事件添加觸發代碼

$(window).resize(function() { /* do what you want */})

來源

2016-08-19 20:37:04

窗口大小調整不起作用

回答

相關問題