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

Question

我要做的事情：
1） 当浏览器窗口的大小是移动设备的大小时，点击按钮会向上滑动并显示div，点击文档上的任何位置都会将其向下滑动，从而隐藏它。

2） 当浏览器窗口超过移动浏览器的宽度时，点击相同的按钮应该以不同的方式显示相同的div（例如：淡入和淡出）

问题
当我将浏览器大小调整到320像素到480像素之间并点击刷新时，向上滑动效果非常好。但当我将浏览器的大小调整到480px以上时，仍然会出现向上滑动的情况，这不是我想要的。现在，如果我在这种状态下刷新，事件不会发生，如果我再次将其调整回320px到480px的范围，事件也不会发生；

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;
     }
}

Answer 2

您的javascript似乎正在检查window.innerWidth，但您知道现在的浏览器有window.matchMedia方法来将媒体查询与javascript匹配吗？matchMedia方法接受媒体查询字符串，就像在CSS中编写一样。你可以直接使用这个开箱即用的窗口大小监听器，或者你可以看看尼克·威廉姆斯伟大的enqirejs库来完成这项工作。

我把一个关于jsfiddle的简单例子与您的一些代码一起使用enquirejs。我相信它能满足你的需要——在不同的断点上有不同的行为。我在相当大的项目中使用过enquirejs，我发现它是解决您面临的问题的可靠方法。

JS

// Use enquirejs to listen for a media query match with matchMedia
enquire.register('screen and (max-width: 480px)', {
  match: function() {
    // remove any namespaced click event then create
    // a new listener to handle max-width: 480px clicky behaviour.
    jQuery('.reg-link').off('click.userReg');
    jQuery('.reg-link').on('click.userReg', function() {
      // create a context to the clicked link so we can reference it later
      var self = this;
      // check if the form is already open if not show it
      if (!jQuery(this).data('isOpen')) {
        // set the isOpen flag to true
        jQuery(this).data('isOpen', true);
        jQuery('#' + this.id + '_container').show("swing", function() {
          // after the animation has fired register an event handler on the body
          // to listen for all clicks.
          jQuery('body').on('click.closeOutside', function(event) {
            // if the event target isn't inside the 'open' container then we close
            // it by removing the style attribute, then we remove the body click
            if (!jQuery(event.target).closest('#' + self.id + '_container').length) {
              // hide open form.
              jQuery('#' + self.id + '_container').removeAttr('style');
              // unbind event and remove the data flag so subsequent clicks 
              jQuery('body').off('click.closeOutside');
              jQuery(self).data('isOpen', false);
            }
          });
        });
      }
    });
    // visual aids!
    jQuery('.reg-link').css('color', 'red');
  }
  // Use enquirejs to listen for another media query match with matchMedia
}).register('screen and (min-width: 481px)', {
  match: function() {
    // remove any namespaced click event then create
    // a new listener to handle min-width: 481px clicky behaviour.
    jQuery('.reg-link').off('click.userReg');
    jQuery('.reg-link').on('click.userReg', function() {
      // create a context to the clicked link so we can reference it later
      var self = this;
      // check if the form is already open if not show it
      if (!jQuery(this).data('isOpen')) {
        // set the isOpen flag to true
        jQuery(this).data('isOpen', true);
        jQuery('#' + this.id + '_container').fadeIn("fast", function() {
          // after the animation has fired register an event handler on the body
          // to listen for all clicks.
          jQuery('body').on('click.closeOutside', function(event) {
            // if the event target isn't inside the 'open' container then we close
            // it by removing the style attribute, then we remove the body click
            if (!jQuery(event.target).closest('#' + self.id + '_container').length) {
              // hide open form.
              jQuery('#' + self.id + '_container').removeAttr('style');
              // unbind event and remove the data flag so subsequent clicks 
              jQuery('body').off('click.closeOutside');
              jQuery(self).data('isOpen', false);
            }
          });
        });
      }
    });
    // visual aids!
    jQuery('.reg-link').css('color', 'blue');
  }
});

如果您需要支持IE9或Opera 12.0，则需要包含matchMedia polyfill，如Paul Irish/Scott Jehl的matchMedia polyfill。所有这些信息都在enquirejs文档中提到。