Question

我想做什么：
1）当浏览器窗口大小是移动设备点击时，按钮会向上滑动并显示一个div，然后单击文档上的任何位置时应将其向下滑动，从而将其隐藏起来。

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

问题
当我将浏览器调整为320px到480像素之间的任何值并点击刷新时，滑动效果非常好。但是当我将浏览器的大小调整到超过480px时，仍然会发生滑动，这不是我想要的。现在，如果我在该状态下点击刷新，事件就不会发生，如果我再次将其调整回320px到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();
     );
});

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

<强>更新

如果您不希望它们在宽度超过480px的屏幕上显示，则应在CSS文件中再添加一个媒体查询：

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

Answer 2

您的javascript似乎在检查window.innerWidth，但您是否知道这些天浏览器采用window.matchMedia方法将媒体查询与javascript进行匹配？ matchMedia方法接受媒体查询字符串，就像在CSS中编写一个一样。您可以使用窗口调整大小的侦听器直接使用此框，或者您可以查看类似Nick Williams的enqirejs库以完成工作。

我使用enquirejs和你的一些代码组合了一个simple example on jsfiddle。我相信它能满足您的需求 - 不同断点的不同行为。我已经在大型项目中使用了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's matchMedia polyfill。所有这些信息都在enquirejs文档中提到。

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

2 个答案: