Question

我正在尝试使用功能显示或隐藏在加载页面上，如下所示：

     $(window).resize(function(){
         var width = $( window ).width()

         if(width >= 1200) {
             console.log("> 1200")

             $('#acct').attr({
                 'style' : 'display: none;', 
             });

             $("#logout").css('display', 'none');
             $("#dropnav").show();
             $("#icontop").show();
             $('.navbar-default').css("max-height", "50px"); 
             $('#meetus').css("margin-left", "-100px");
         } else {
             $("#acct").show();
             $("#logout").show();
             $("#icontop").hide();
             $("#dropnav").hide();
             $('.navbar-default').css("max-height", "999999px"); 
             $('#meetus').css("margin-left", "-60px"); 
         }
    });

当我使用fuction resize（）运行时，页面隐藏并显示组件并快速工作，但在文档准备好后，ou窗口加载没有任何反应：（

Answer 1

这是因为在页面加载时未调用$(window).resize()。

将代码重构为单独的函数：

function resizer(){
      var width = $( window ).width()

      if(width >= 1200) {
          console.log("> 1200")
          $('#acct').attr({
               'style' : 'display: none;', 
          });
          $("#logout").css('display', 'none');
          $("#dropnav").show();
          $("#icontop").show();
          $('.navbar-default').css("max-height", "50px"); 
          $('#meetus').css("margin-left", "-100px");
      }
      else {
          $("#acct").show();
          $("#logout").show();
          $("#icontop").hide();
          $("#dropnav").hide();
          $('.navbar-default').css("max-height", "999999px"); 
          $('#meetus').css("margin-left", "-60px"); 
      }
}

然后在resize和ready上调用它：

$(document).ready(function(){
   resizer();
});

$(window).resize(function(){
   resizer();
});

加载页面上的jQuery show（）hide（）

1 个答案: