JQuery-Show/Hide-Failing После загрузки

Question

My Jquery не может скрыть мое мобильное меню при загрузке. Я использовал этот код раньше, и он отлично работает - просто интересно, чего я не хватает. Любое понимание было бы полезно. Спасибо.

Jquery

var screensize = document.documentElement.clientWidth; 

$(document).ready(function(){ 

$(window).resize(function(){ 
if (width == GetWidth()) { 
    return; 
    } 
width = GetWidth(); 

if($(window).width() < 600) { 
    $('.link').hide(); 
} else { 
    $('.link').show(); 
} 

}); 

$('header').on('click', function() { 
$('.link').slideToggle(500); 
e.preventDefault(); 

}); 
}); 

ИСХОДНЫЙ КОД

<nav> 
    <ul id="mobile_active"> 
      <li class="link"><a href="#">About Us</a></li> 
      <li class="link"><a href="#">Creative</a></li> 

     <li id="logo"><a href="#"><img src="#.png"/></a></li> 

      <li class="link"><a href="#">Portfolio</a></li> 
      <li class="link"><a href="#">Contact Us</a></li> 
    </ul> 
    </nav> 

    <header> 
     <a class="mobile_menu"></a> 
    </header> 

CSS

@media (max-width: 600px) { 

header {height:35px; top:185px; display:block;} 

nav {position: relative; top: 113px;} 

nav li a {width:100%; padding:0;} 

nav ul li {width:100%; padding:0;} 

nav ul li a {color: #949c50; font-size:1em; text-align:center; 
border-bottom: 1px solid #bbb1a6; display:block; padding:3%; width:94%;} 

nav ul li#logo a {border-bottom: none;} 

nav li:first-child {padding-top:40px;} 

nav ul li a:hover { color: #FFF;background-color:#949c50;} 

nav ul li#logo a:hover {background-color:transparent;} 

a.mobile_menu { 
display:block; 
width:100%; height:38px; 
background:#a54499 
url(../links/mobile_link_menu.png)no-repeat 4px 4px; 
position:absolute; 
top:165px; 
cursor:pointer; } 

a.mobile_menu.selected {background-position: 4px -26px; } 


li#logo { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-top: -50px; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%);} 
} 

Answer 1

Вот решение - хотя я до сих пор не совсем понимаю, почему этот код работает, а мой не работает, так как я все еще боюсь с JQuery (Если кто-то хочет пролить свет на это, Я здесь, чтобы учиться). По-видимому, мне нужно было добавить определенную переменную и console.log (width). Я нашел этот ответ на этом сайте и хотел бы поблагодарить пользователя mrtsherman.

$(window).resize(function() { 
var width = $(window).width(); 
console.log(width); 
if (width < 600) { 
    $('.link').hide(); 
} else { 
$('.link').show(); 
} 
}); 

Answer 2

Вы пробовали использовать CSS медиа-запрос вместо использования JavaScript? т. е. установите для CSS-отображения ссылки значение none по умолчанию и используйте приведенный ниже CSS, чтобы показать его, когда размер экрана меньше или равен 600 пикселей.

.link { 
display: none; 
} 

@media (макс-ширина: 600px) {

.link { 
display: visible; 
} 

}

Я надеюсь, что это помогает.