javascript - jQuery 搜索切换

Question

在我的网站上，我有一个 div .toggle-search，如果您单击它，它会扩展到搜索表单所在的 .search-expand。这是 jQuery 中的代码

/*  Toggle header search
/* ------------------------------------ */
    $('.toggle-search').click(function(){
        $('.toggle-search').toggleClass('active');
        $('.search-expand').fadeToggle(250);
            setTimeout(function(){
                $('.search-expand input').focus();
            }, 300);
    });

现在关闭 .search-expand 的唯一方法是再次单击 .toggle-search。但我想改变一下，如果你点击网站上的其他任何地方，它就会关闭。举一个更简单的例子，我有 Hueman 主题，我说的是右上角的搜索选项。 http://demo.alxmedia.se/hueman/

谢谢!

Answer 1

在除搜索区域之外的所有元素上添加事件。

$('body *:not(".search-expand")').click(function(){
    $('.toggle-search').removeClass('active');
    $('.search-expand').fadeOut(250);
});

或者换一种方式，

$('body').click(function(e){
    if(e.target.className.indexOf('search-expand') < 0){
        $('.toggle-search').removeClass('active');
        $('.search-expand').fadeOut(250); 
    }
});