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

Question

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

如果您查看站点的全尺寸然后调整屏幕大小，在 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');
});

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