在不重新加载的情况下运行 jQuery 媒体查询

running jquery media query without reload

本文关键字：情况下 运行 jQuery 查询 媒体 加载 新加载      更新时间：2023-09-26

我有三个不同的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;
}

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

演示

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

更新

小提琴

在窗口大小调整和文档就绪时调用函数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");        
  }
}

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

你想要的功能可以用一种非常简单的方式完成，这是我的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()函数以检测页面大小的调整
  2. 调整窗口大小后，我使用$(".s").trigger("blur")触发文本框的模糊函数
  3. 然后，我找到窗口的宽度，只有当用户专注于文本时
  4. 一旦输入框再次成为焦点，我就会隐藏黄色div。

这是供您参考的DEMO

相关文章：