运行jquery媒体查询无刷新

Question

我有三个不同的红色，蓝色，绿色和黄色的div。红色包含一个输入框。我试图隐藏黄色，如果红色输入框被点击（焦点），并且如果屏幕大小低于500.它确实有效，但只有当我重新加载页面有什么方法可以使其工作，而无需重新加载页面？

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
<input class="s" placeholder="Search"> 
</form> 
</div> 
<div class="blue"> top </div> 
<div class="green"> middle </div> 
<div class="yellow"> bottom </div> 

JS

if ($(window).width() < 960) { 
    $(function(){ 

    $(".s").on("focus",function() 
    { 
     $(".yellow").hide(); 
    }); 
    $(".s").on("blur",function() 
    { 
     $(".yellow").show(); 
    }); 

}); 
} 
else { 
} 

CSS

.red, .blue, .green, .yellow 
{ 
    padding: 10px; 
    border: 1px solid #f00; 
} 
.red{ 
    background: red; 
} 
.blue{ 
    background: blue; 
} 
.green{ 
    background: green; 
} 
.yellow{ 
    background: yellow; 
} 
.s:focus{ 
    border: 1px solid black; 
} 
.s:focus + yellow{ 
    display: none; 
} 

Answer 1

你想可以用一个更简单的方式来完成的功能，这是我的HTML

HTML

 <div class="red"> 
      <form> 
       <input type="text" class="s" id="txt" placeholder="Search"/> 
      </form> 
     </div> 
     <div class="blue">top</div> 
     <div class="green">middle</div> 
     <div class="yellow">bottom</div> 

CSS

  .red, .blue, .green, .yellow { 
       padding: 10px; 
       border: 1px solid #f00; 
      } 
      .red { 
       background: red; 
      } 
      .blue { 
       background: blue; 
      } 
      .green { 
       background: green; 
      } 
      .yellow { 
       background: yellow; 
      } 
      .s:focus { 
       border: 1px solid black; 
      } 
      .s:focus + yellow { 
       display: none; 
      } 

MY JS：

   $(document).ready(function() { 
       var width = $(window).width(); 
       $(window).resize(function() { 
        $(".s").trigger("blur"); 
        $(".s").on("focus", function() 
        { 
         var width = $(window).width(); 
         if (width < 960) 
         { 

          $(".yellow").hide(); 
         } 
        }); 
        $(".s").on("blur", function() 
        { 
         $(".yellow").show(); 
        }); 
       }); 
      }); 

更新JS：

   $(document).ready(function() { 
       var width = $(window).width(); 
        $(".s").trigger("blur"); 
        $(".s").on("focus", function() 
        { 
         var width = $(window).width(); 
         $("#det").text(width); 
         alert(width); 
         if (width < 960) 
         { 
         $(".yellow").hide(); 
         } 
        }); 
        $(".s").on("blur", function() 
        { 
         $(".yellow").show(); 
        }); 
       $(window).resize(function() { 
        $(".s").trigger("blur"); 
        $(".s").on("focus", function() 
        { 
         var width = $(window).width(); 
         $("#det").text(width); 
         alert(width); 
         if (width < 960) 
         { 
         $(".yellow").hide(); 
         } 
        }); 
        $(".s").on("blur", function() 
        { 
         $(".yellow").show(); 
        }); 
       }); 
      }); 

我正在这里做的是什么，以便检测页面

一旦调整窗口大小的缩放

1. 使用window.resize()功能，我触发的模糊函数的文本框，使用$(".s").trigger("blur")
2. 然后，我找到了窗口的宽度，只有当用户关注文本
3. 一旦输入框重新进入焦点，我将隐藏黄色div。

这里是供您参考

Answer 2

而不是页面的加载结合，把代码中的函数，调用该函数，当你想它被称为。我将它添加到一个函数中，然后点击演示按钮。

Demo

$(document).ready(function() { 
$('button').on('click', function() { 
    if (checkWidth()) { //checking width of window before binding the focus event 
     onFocusHandling(); 
    } 
}); 
}); 


function onFocusHandling() { 
//you can also add the checkWidth() here than above 
$(".s").on("focus", function() { 
    $('.yellow').hide(); 
}); 

$(".s").on("blur", function() { 
    $('.yellow').show(); 
}); 
} 

function checkWidth() { 
return ($(window).width() < 960); 
} 

更新

Fiddle

叫上窗口调整大小和文件准备功能onFocusHandling

$(document).ready(function() { 
onFocusHandling(); 
$(window).resize(function() { 
    onFocusHandling(); 
}); 
}); 

function onFocusHandling() { 

    if (checkWidth()) { 
    $(".s").on("focus", function() { 
     $('.yellow').hide(); 
    }); 
    $(".s").on("blur", function() { 
     $('.yellow').show(); 
    }); 
    } 
    else { 
    $(".s").off("focus").off("blur");   
    } 
} 

宽度最大时取消绑定焦点和模糊事件。