如何改进这个jquery和隐藏焦点

Question

我有一个简单的搜索表单比隐藏和显示时点击按钮，但我不知道如何隐藏时失去焦点，我想知道如何改进代码

$(document).ready(function(){
    $(".search-toggle__icon").on({
        click: function() {
            $(".search-toggle__inner").toggleClass("is-hidden is-visible");
            $(".search-toggle .input-text").focus();
        }
    })
});

这里是demo

Answer 1

使用jQuery的blur事件来检测.input-text何时失去焦点并相应地切换.search-toggle__inner的类

$(".input-text").on("blur", function() {
  $(".search-toggle__inner").toggleClass("is-visible is-hidden");
})

Answer 2

您只需要在元素上添加一个focusout事件侦听器。所以你的完整代码应该是这样的:

$(document).ready(function(){
    $(".search-toggle__icon").on({
        click: function() {
            $(".search-toggle__inner").toggleClass("is-hidden is-visible");
            $(".search-toggle .input-text").focus();
        }
    });
    $(".search-toggle .input-text").on('focusout', function() {
        $(".search-toggle__inner").toggleClass("is-hidden is-visible");
    });
});