javascript - 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 根据屏幕尺寸显示/隐藏元素 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;
}