jquery - 在刷新完成之前，调整浏览器窗口大小不会激活 jQuery 事件

Question

我正在尝试做的事情:
1) 当浏览器窗口大小为移动设备的大小时，单击按钮将向上滑动并显示 div，单击文档上的任意位置应将其向下滑动，从而将其隐藏。

2)当浏览器窗口的宽度大于移动浏览器宽度时，单击同一按钮应以不同的方式显示同一 div(例如:淡入和淡出)

问题
当我将浏览器大小调整为 320 像素到 480 像素之间的任何值并点击刷新时，向上滑动效果完美。但是当我将浏览器大小调整到超过 480px 时，向上滑动仍然发生，这不是我想要的。 现在，如果我在该状态下点击刷新，该事件不会发生，如果我再次将其大小调整回 320 像素到 480 像素的范围，该事件也不会发生；

HTML

<div id="signup_container">
    <input type="text" placeholder="First Name">
    <input type="text" placeholder="Last Name">
    <input type="email" placeholder="Email">
    <input type="password" placeholder="Create Password">
    <button id="join" type="button">JOIN YUM YUM</button>
</div>

<div id="login_container">
    <input type="email" placeholder="Email">
    <input type="password" placeholder="Password">
    <div id="forgot">Forgot Your Password?</div>
    <button id="login" type="button">SIGN INTO YUM YUM</button>
</div>

CSS

    #signup_container, #login_container
    {
        width:50%;
        background-color:#FFFFFF;
        overflow:hidden;
        text-align:center;
        border-top: 1px solid #D1D1D1;
        box-shadow:0px -1px 2px #888888;
        -webkit-box-shadow:0px -1px 2px #888888;
        -moz-box-shadow:0px -1px 2px #888888;
        opacity:0.9;
        display:none;
    }

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait)
{
    #signup_container, #login_container
    {
        width:100%;
        overflow:hidden;
        text-align:center;
        border-top: 1px solid #D1D1D1;
        box-shadow:0px -1px 2px #888888;
        -webkit-box-shadow:0px -1px 2px #888888;
        -moz-box-shadow:0px -1px 2px #888888;
        opacity:0.9;
        position:absolute;
        bottom:0px;
        display:none;
    }

    #forgot
    {
        font-size:14px;
        margin-top:4%;
    }
}

JS

var isBreakPoint = function (bp) {
    var bps = [320, 480, 768, 1024],
        w = $(window).width(),
        min, max
    for (var i = 0, l = bps.length; i < l; i++) {
      if (bps[i] === bp) {
        min = bps[i-1] || 0
        max = bps[i]
        break
      }
    }
    return w > min && w <= max
}

// Usage
// Breakpoint between 320 and 480
if (isBreakPoint(480)) { 

$(document).ready(function(){
  $("#signup").click(function(){
    $("#signup_container").show("slide",{direction:'down'});
  });
});

}

如何让浏览器主动响应？ 注意可能有一些与之相关的问题，但我不确定。 提前致谢。

更新 JS

$(document).ready(function(){
     $(window).resize(function(){
          var currentWidth = window.innerWidth;
          if(currentWidth < 320){
              //code here
          }
          else if(currentWidth > 320 && currentWidth < 480 ){
                $("#signup").click(function(){
                    $("#signup_container").show("slide",{direction:'down'});
                });
                $("#signin").click(function(){
                    $("#login_container").show("slide",{direction:'down'});
                });

          }
          else if(currentWidth > 480 && currentWidth < 768){
              //code here
          }
          else if(currentWidth > 768 && currentWidth < 1024){
              //code here
          }
          else{
              //width greater than 1024px
          }
     });
});

在单个组中使用两次单击功能不会导致任何情况发生。

Answer 1

您需要使用resize jQuery 事件，然后利用 innerWidth 属性

$(document).ready(function(){

     function updateContainers(){
          var currentWidth = window.innerWidth;
          if(currentWidth < 320){
              //code here
          }
          else if(currentWidth > 320 && currentWidth <= 480 ){
              $("#signup").click(function(){
                $("#signup_container").show("slide",{direction:'down'});
            });
            $("#signin").click(function(){
                $("#login_container").show("slide",{direction:'down'});
            });
          }
          else if(currentWidth > 480 && currentWidth <= 768){
              $("#signup").click(function(){
                $("#signup_container").hide("slide",{direction:'up'});
            });
            $("#signin").click(function(){
                $("#login_container").hide("slide",{direction:'up'});
            });
          }
          else if(currentWidth > 768 && currentWidth <= 1024){
              //code here
          }
          else{
              //width greater than 1024px
          }
     }

     updateContainers();

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

每次调整浏览器大小时都会触发此事件，因此无需刷新页面

更新

如果您不希望它们在宽度大于 480 像素的屏幕上可见，您应该在 CSS 文件中再添加一个媒体查询:

@media screen and (min-width: 480px){
     #signup_container, #login_container{
         display: none;
     }
}