Question

我刚从头开始重建我的网站并遇到一个小问题，我似乎无法修复自己的响应式导航。

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

Answer 1

感谢Junaid Ahmed（@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');
    });

响应式导航可视性 - jQuery Show Hide

1 个答案: