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

我剛剛從頭開始重建我的網站，並有一個小問題，我似乎無法解決自己的響應式導航問題。響應式導航可視性 - jQuery顯示隱藏

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

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

來源

2012-10-13 Roy Barber

我不能生產，你在谷歌瀏覽器描述的不當行爲。 – Mika

Hi @Mika，您需要擁有超過800px寬的網站，然後調整瀏覽器的大小，直到菜單更改爲右上角的圖標。點擊圖標，菜單將打開，再次點擊關閉。現在將瀏覽器重新調整到800像素以上，您會注意到導航已經消失！ –

拜朱奈德·艾哈邁德（@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'); 
    });

來源

2012-10-13 19:35:00

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

回答

相關問題