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

Question

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

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

here the demo

Answer 1

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

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

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

How to improve this jquery and hide on focus out

jquery

show

hide