响应式导航可见性 - jQuery Show Hide答案

【问题标题】：Responsive Navigation Visability - jQuery Show Hide响应式导航可见性 - jQuery Show Hide
【发布时间】：2012-10-14 03:35:00
【问题描述】：

我刚刚从头开始重建我的网站，并且有一个小问题，我似乎无法在响应式导航上解决自己。

如果您查看网站的全尺寸然后调整屏幕大小，响应式导航会在 400 像素处启动。如果您打开导航并再次将其关闭，然后将浏览器的大小调整到 400 像素以上，菜单将保持隐藏状态。

您可以在这里查看：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');
});

【问题讨论】：

我无法产生您在 Google Chrome 中描述的不当行为。
嗨@Mika，您需要使网站的宽度超过800px，然后调整浏览器的大小，直到菜单变为带有右上角图标的移动版本。单击图标，菜单将打开，再次单击关闭。现在将浏览器的大小调整回 800 像素以上，您会注意到导航消失了！

标签： jquery responsive-design

【解决方案1】：

感谢 Twitter 上的 Junaid Ahmed (@simple_ux)

修复非常简单！在此处添加 .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');
    });

【讨论】：