點擊區域外的空白處隱藏彈出框

最近在做一個搜索框，點擊圖標可以顯示出搜索框，再次點擊可以顯示選中后的結果，但是點擊區域外的空白處也是可以收縮彈出框
大致的樣子就是這樣

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的后代元素才會使背景色變成紅色；

這段代碼也相對較好吧，可以試著使用。