Я хочу, чтобы скрыть текстовое поле при нажатии

Question

В моем новом проекте я хотел бы добавить окно поиска с увеличением ширины при нажатии на значок. Я создал с этим переключателем ширины запроса, но мне нужно скрыть текстовое поле, когда нажмите снаружи тоже.

HTML:

<div class="search_box">
     <form>
        <i class="fa fa-search"></i>
        <input type="text" class="form-control">
     </form>
</div>

JQuery:

jQuery(document).ready(function(){
    jQuery('.search_box .fa-search').click(function(){
        jQuery('.search_box input').animate({width:'toggle'},500);

    });
});

Answer 1

Попробуй это:

$('.search_box input').blur(function() {
   $(this).hide();
});

Answer 2

Попробуйте этот код:

$(document).on("click", function(e){
    if( !$(".search_box").is(e.target) ){ 
    //if your box isn't the target of click, hide it
        $(".search_box").hide();
    }
});

Чтобы использовать с вашим текстовым полем, просто измените $(". Search_box") для вашего текстового поля. Надеюсь, поможет