Question

我有三种不同的红色，蓝色，绿色和黄色。红色包含一个输入框。我试图隐藏黄色，如果单击红色输入框（焦点），如果屏幕尺寸低于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;
            }

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

我在这里做的是，

使用window.resize()函数来检测页面的大小调整
调整窗口大小后，我会使用$(".s").trigger("blur")触发文本框的模糊功能
然后，只有当用户专注于文本时，才能找到窗口的宽度
一旦输入框再次聚焦，我隐藏黄色div。

以下是DEMO供您参考

运行jquery媒体查询而无需重新加载

2 个答案: