響應式導航可視性 - jQuery顯示隱藏

Question

我剛剛從頭開始重建我的網站，並有一個小問題，我似乎無法解決自己的響應式導航問題。

如果您查看網站的全尺寸，然後調整屏幕大小，在400px響應導航開始。如果您打開導航並再次關閉，然後調整瀏覽器的大小超過400px菜單仍然隱藏。

您可以查看這裏：http://roybarber.com

了jQuery是functions.min.js，也低於：

$.fn.collapsable = function(options) { 
    return this.each(function() { 
    var obj = $(this); 
    var tree = $('.main'); 
    obj.click(function(){ 
    if(obj.is(':visible')){tree.slideToggle('fast');tree.toggleClass('clearfix');} 
    }); 
    $(window).resize(function(){ 
    if ($(window).width() >= 767){ tree.toggleClass('clearfix'); }; 
    }); 
}); 
}; 
var menubtn = $('.menu-btn'); 
menubtn.collapsable(); 
menubtn.click(function(ev) { 
    menubtn.toggleClass('open'); 
}); 

Answer 1

拜朱奈德·艾哈邁德（@simple_ux）的Twitter

修復是很簡單！添加.show這裏：

if ($(window).width() >= 600){ tree.toggleClass('clearfix').show(); }; 

也不得不糾正瀏覽器.WIDTH相匹配的媒體查詢，繼承人的完整代碼

$.fn.collapsable = function(options) { 
     return this.each(function() { 
     var obj = $(this); 
     var tree = $('.main'); 
     obj.click(function(){ 
      if(obj.is(':visible')){tree.slideToggle('fast');tree.toggleClass('clearfix');} 
     }); 
     $(window).resize(function(){ 
      if ($(window).width() >= 600){ tree.toggleClass('clearfix').show(); }; 
     }); 
     }); 
    }; 
    var menubtn = $('.menu-btn'); 
    menubtn.collapsable(); 
    menubtn.click(function(ev) { 
     menubtn.toggleClass('open'); 
    });