点击空白区域关闭弹出框

点击区域外的空白处隐藏弹出框

最近在做一个搜索框，点击图标可以显示出搜索框，再次点击可以显示选中后的结果，但是点击区域外的空白处也是可以收缩弹出框
大致的样子就是这样

navbar.png shownavbar.png

在网上搜索的到以下的解决方案

  //点击空白区域隐藏弹出框(全局)
            $(document).click(function(e){

                // 目标区域，点击某个弹出的区域
              var pop = $('#search-navbar');

                if(!pop.is(e.target) && pop.has(e.target).length === 0) {
                    //点击外围区域隐藏弹出框
                    self.isOpen = false;
                    $scope.$evalAsync();
                }else{
                    //点击目标区域不隐藏
                    self.isOpen = true;
                    $scope.$evalAsync();
                }
            });

w3c上这样解释is方法

is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。

if ( $target.is("li,span") ) {
    $target.css("background-color", "red");
  }

这段就是表示点击的要素要么包括li，要么包括span，否则背景不变成红色

w3c上这样解释has方法

has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。
如果给定一个表示 DOM 元素集合的 jQuery 对象，.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代；如果任何后代元素匹配该选择器，该元素将被包含在结果中。

$('li').has('ul').css('background-color', 'red');

这段只是表示，只有选定的li元素下有ul ，ul是li的后代元素才会使背景色变成红色；

这段代码也相对较好吧，可以试着使用。