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”）即可。希望它有所帮助

我想在点击侧面时隐藏文本框

2 个答案: