jQuery的，如果寬度小於767前面的代碼不應該工作

問題：我想，在代碼if語句只會如果屏幕寬度小於767px較大的工作，如果是小於767px以前的代碼不應該不工作，怎麼做？jQuery的，如果寬度小於767前面的代碼不應該工作

的jQuery：

$(document).ready(function() { 
    $(window).resize(function() { 
     if ($(document).width() > 767) { 
    $('.navigation-hide').hide(); 

    $("nav").mouseenter(function() {  
     $('.navigation-hide').stop().fadeIn(500);  
    }); 

    $('nav').mouseleave(function() {  
     $('.navigation-hide').stop().fadeOut(500);   
    }); 
} 
     else { 
      break; 
     } 
    }); 

});

來源

2015-10-04 Alanas Macijauskas

以這種方式使用JS並不是一個好主意。

您可以使用CSS來顯示根據屏幕尺寸using media queries /隱藏要素。

@media (max-width: 768px) { 
    .navigation-hide { 
     display: none; 
    } 
    nav:hover .navigation-hide { 
     display: block; 
    } 
}

您可以使用CSS轉換實現淡入淡出效果。

看看這個jsFiddle

.navigation-hide { 
    position: absolute; 
    left: -999em; 
    top: 0; 
    opacity: 0; 
    transition: opacity 0.5s, left 0.5s 0.5s; 
} 

nav:hover .navigation-hide { 
    left: 0; 
    opacity: 1; 
    transition: opacity 0.5s; 
}

來源

2015-10-04 18:49:40 Jackson

我不能使用媒體規則，因爲，因爲我需要用JS淡入或淡出一個元素，使其平滑。 –

是的，編輯後的版本適合我，謝謝！ –

使用IF語句與 window.innerWidth！

$(document).ready(function() { 
if(window.innerWidth >= 767){ 
$(window).resize(function() { if ($(document).width() > 767) { $('.navigation-hide').hide(); $("nav").mouseenter(function() { $('.navigation-hide').stop().fadeIn(500); }); $('nav').mouseleave(function() { $('.navigation-hide').stop().fadeOut(500); }); } else { break; } }); }});

來源

2015-10-04 18:46:41 Manu

此代碼不適用於我，但我不知道爲什麼，它可能是我不能在這裏使用break語句？ –

錯誤是什麼？ – Manu

這不是一個錯誤，代碼只是不工作，我認爲break語句不應該在這裏使用，但我不知道爲什麼.. –

應該使用CSS媒體查詢和影響來實現的，看到這個https://jsfiddle.net/DTcHh/12782/

但是如果你堅持使用jQuery，然後檢查了這一點

$(document).ready(callbackReady); 
$(window).resize(callbackResize); 

var isWidthReady = false; 
var callbackReady = function() { 
    $("nav").mouseenter(function() { 
     if(isWidthReady) { 
      $('.navigation-hide').stop().fadeIn(500);  
     }   
    }); 
    $('nav').mouseleave(function() { 
     if(isWidthReady) { 
      $('.navigation-hide').stop().fadeOut(500); 
     } 
    }); 
} 
var callbackResize = function() { 
    if ($(document).width() > 767) { 
     $('.navigation-hide').hide(); 
     isWidthReady = true; 
    } 
    else { 
     isWidthReady = false; 
    } 
};

Note: do not implement any event handler inside another recurring event (resize() in your case) unless you are creating a new element dynamically or removing and reattaching an event.

來源

2015-10-04 19:02:21 kolunar

你的代碼看起來不錯，但它對我來說不夠用.. –

你能告訴我你的html以及我可以改進答案嗎？你的''導航 - 隱藏''應該做什麼？ – kolunar

檢查了這一點：https://jsfiddle.net/DTcHh/12779/ jQuery代碼應該只工作，如果屏幕寬度小於767px時，誤差：如果屏幕上有移動版的導航欄，然後嘗試打開它，將鼠標光標移動到打開的區域，然後將光標移出該區域，然後您將看到錯誤信息，我正在嘗試執行此操作。 –

jQuery的，如果寬度小於767前面的代碼不應該工作

回答

相關問題