點(diǎn)擊區(qū)域外的空白處隱藏彈出框

最近在做一個(gè)搜索框，點(diǎn)擊圖標(biāo)可以顯示出搜索框，再次點(diǎn)擊可以顯示選中后的結(jié)果，但是點(diǎn)擊區(qū)域外的空白處也是可以收縮彈出框
大致的樣子就是這樣

navbar.png

shownavbar.png

在網(wǎng)上搜索的到以下的解決方案

  //點(diǎn)擊空白區(qū)域隱藏彈出框(全局)
            $(document).click(function(e){

                // 目標(biāo)區(qū)域，點(diǎn)擊某個(gè)彈出的區(qū)域
              var pop = $('#search-navbar');

                if(!pop.is(e.target) && pop.has(e.target).length === 0) {
                    //點(diǎn)擊外圍區(qū)域隱藏彈出框
                    self.isOpen = false;
                    $scope.$evalAsync();
                }else{
                    //點(diǎn)擊目標(biāo)區(qū)域不隱藏
                    self.isOpen = true;
                    $scope.$evalAsync();
                }
            });

w3c上這樣解釋is方法

is() 根據(jù)選擇器、元素或 jQuery 對(duì)象來(lái)檢測(cè)匹配元素集合，如果這些元素中至少有一個(gè)元素匹配給定的參數(shù)，則返回 true。

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

這段就是表示點(diǎn)擊的要素要么包括li，要么包括span，否則背景不變成紅色

w3c上這樣解釋has方法

has() 將匹配元素集合縮減為擁有匹配指定選擇器或 DOM 元素的后代的子集。
如果給定一個(gè)表示 DOM 元素集合的 jQuery 對(duì)象，.has() 方法用匹配元素的子集來(lái)構(gòu)造一個(gè)新的 jQuery 對(duì)象。所使用的選擇器用于檢測(cè)匹配元素的后代；如果任何后代元素匹配該選擇器，該元素將被包含在結(jié)果中。

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

這段只是表示，只有選定的li元素下有ul ，ul是li的后代元素才會(huì)使背景色變成紅色；

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