Question

当屏幕返回到最大宽度时，我的响应式菜单消失。我正在使用this code，但我稍微修改了一下

    $(function() {
  if ( $(window).width() < 700) {
  var menuVisible = false;
    $('#menuBtn').click(function() {
      if (menuVisible) {
        $('#menu').css({'display':'none'});
        menuVisible = false;
        return;
      }
      $('#menu').css({'display':'block'});
      menuVisible = true;
    });

    $('#menu').click(function() {
      $(this).css({'display':'none'});
      menuVisible = false;
    });
  }else{
    menuVisible = true;
  };
});

Answer 1

您应该使用windows resize event在调整窗口大小时再次调用您的功能

$(window).resize(function(){
  if ( $(window).width() > 700) {
      $('#menu').css({'display':'block'});
    }
})

我在这里对您的代码进行了以下编辑： https://jsfiddle.net/jfhLmgvc/2/

这段代码也可以更加简化，有点像这样的css： https://jsfiddle.net/jmbup8g3/

剧本：

$(function() {
  $('#menuBtn').click(function() {
    if($(window).width() < 700){
      $('#menu').fadeToggle(300);
    }
  });
  $('#menu').click(function() {
    if($(window).width() < 700){
      $(this).css({'display':'none'});
    }
  });
});

css：

@media screen and (min-width: 700px) { 
  #menu{display:block !important;}
}

屏幕调整大小几次后，响应式菜单消失

1 个答案: