運行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");   
    } 
} 

寬度最大時取消綁定焦點和模糊事件。