jQuery如果寬度小於767，則先前的代碼不起作用

Question

問題：我希望if語句中的代碼僅在屏幕寬度大於767px時才起作用，而如果小於767px，則先前的代碼不起作用，怎么辦？

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;
        }
    });

});

Answer 1

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

您可以使用CSS 使用媒體查詢根據屏幕尺寸顯示/隱藏元素。

@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;
}

Answer 2

應該使用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;
    }
};

注意：除非要動態創建新元素或刪除並重新附加事件，否則請勿在另一個重復發生的事件（在您的情況下為resize（））內實現任何事件處理程序。

Answer 3

在window.innerWidth中使用if語句！

    $(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; } }); }});