0

サイトをゼロから再構築したばかりで、レスポンシブ ナビゲーションで自分で修正できないような小さな問題があります。

サイトをフル サイズで表示してから画面のサイズを変更すると、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');
});
4

1 に答える 1

0

TwitterのJunaidAhmed （@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');
    });
于 2012-10-13T19:35:00.330 に答える