响应式设计Jquery导航

我正在控制用Jquery创建的移动菜单。当它加载时，我需要将其隐藏，只有当用户单击“标题”时才会显示，激活我创建的命令。当用户向下滚动页面时，我还需要菜单保持打开状态。这篇文章中概述的选项几乎奏效

现在，当页面加载时，菜单打开。如果我使用else$nav.hide（）；}将其指定为关闭，当我将其加载到移动设备上并尝试向下滚动时，菜单将自动关闭。如果我指定它在加载媒体查询时保持隐藏状态，则桌面布局中会出现问题（当我调整其大小时，菜单链接不会返回到其原始位置，而是并排堆叠在彼此下方-我使用内联块作为我的显示，因为它与我的布局相比更适合浮动元素。）

如果有人有任何想法或能为我指出正确的方向，我将不胜感激。多谢各位

JQUERY

var screensize = document.documentElement.clientWidth;

$(function (){

var $window = $(window),
    $nav = $('.link'),
    $button = $('header');

$button.on('click', function (){
    $nav.slideToggle(500);
});  

$window.on('resize', function (){
    if ($window.width() > 600)
    { $nav.show();  
    } 
});
}); 

---

所以，我发现我的问题是由iphone5上的滚动错误造成的。我已经在其他移动设备上进行了测试，效果非常好。由于另一个用户的帮助，我修改了代码。我保持了Jquery的特定答案，因此没有修改任何CSS

var screensize = document.documentElement.clientWidth;

$(document).ready(function(){

var $window = $(window),
    $nav = $('.link'),
    $button = $('header');

$button.on('click', function (){
    $nav.slideToggle(400);
});  

function adjustStyle(width) {
    width = parseInt(width);
    if (width > 600) {
        $nav.show();
    } else {
       $nav.hide();
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
});
});
});