Javascript 运行jquery媒体查询而不重新加载

我有三种不同的颜色：红色、蓝色、绿色和黄色。红色包含一个输入框。如果点击了红色的输入框（焦点），并且屏幕尺寸小于500，我试图隐藏黄色。它确实可以工作，但只有当我重新加载页面时，有没有办法让它工作而不重新加载页面

html

---

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

---

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

您想要的功能可以用一种非常简单的方法完成，这是我的HTML

HTML

我的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();
                    });
               });
            });

$（文档）.ready（函数（）{
变量宽度=$（窗口）.width（）；
$（窗口）。调整大小（函数（）{
$（“.s”）。触发器（“模糊”）；
$（“.s”）。关于（“焦点”，函数（）
{
变量宽度=$（窗口）.width（）；
如果（宽度<960）
{
$（“.yellow”）.hide（）；
}
});
$（“.s”）.on（“模糊”，函数（）
{
$（“.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();
                    });
               });
            });

$（文档）.ready（函数（）{
变量宽度=$（窗口）.width（）；
$（“.s”）。触发器（“模糊”）；
$（“.s”）。关于（“焦点”，函数（）
{
变量宽度=$（窗口）.width（）；
$（“#det”）.文本（宽度）；
警报（宽度）；
如果（宽度<960）
{
$（“.yellow”）.hide（）；
}
});
$（“.s”）.on（“模糊”，函数（）
{
$（“.yellow”）.show（）；
});
$（窗口）。调整大小（函数（）{
$（“.s”）。触发器（“模糊”）；
$（“.s”）。关于（“焦点”，函数（）
{
变量宽度=$（窗口）.width（）；
$（“#det”）.文本（宽度）；
警报（宽度）；
如果（宽度<960）
{
$（“.yellow”）.hide（）；
}
});
$（“.s”）.on（“模糊”，函数（）
{
$（“.yellow”）.show（）；
});
});
});

我在这里做的是，

使用

window.resize（）

函数检测页面大小

调整窗口大小后，我将使用

$（.s”）.trigger（“blur”）

然后，我找到窗口的宽度，只有当用户关注文本时

一旦输入框再次进入焦点，我将隐藏黄色div。

---

这里有一个供您参考的

关于焦点，您应该调用一个函数来检查窗口宽度，然后相应地隐藏一个noob。不知道怎么做没有绑定按钮它能工作吗？比如我可以不用点击绑定按钮就对焦。我已经在演示的按钮上使用了它。您可以随时调用onFocusHandling。你想什么时候调用它？我说的是一个noob（从你的评论到另一个答案）并没有撒谎。当你调整浏览器大小时，你似乎需要调用这个函数。在

$（窗口）上调用
onFocusHandling
。调整大小

（如其他答案所示），并在

document.ready（）上调用它。看到了吗？实际上，我只想在宽度小于贝娄时隐藏黄色。它不能那样工作吗？它在下面工作，如果最大化，它仍然隐藏，如果我已经加载了页面，然后调整大小。但如果我重新调整大小，那么重新加载它不会
    .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;
}

$(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);
}

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

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

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

              $(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();
                    });
               });
            });

                $(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();
                    });
               });
            });