在不重新加载的情况下运行 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

不要在页面加载时绑定，而是将代码放在一个函数中，并在您希望调用该函数时调用该函数。我将它添加到一个函数中，并在单击演示按钮时调用它。

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

当宽度最大化时，解除焦点和模糊事件的绑定。

Answer 2

您想要的功能可以使用非常简单的方式完成，这是我的 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;
            }

我的 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()function 来检测页面的大小调整
2. 调整窗口大小后，我使用$(".s").trigger("blur") 触发文本框的模糊功能
3. 然后，我找到了窗口的宽度，只有当用户关注文本时
4. 一旦输入框再次成为焦点，我将隐藏黄色 div。

这是一个DEMO 供您参考