效果實現：

點選按鈕選單出現:                                    點選選單外則收起選單:

開啟選單效果：給"新建“新增onclick屬性，使選單display="block"顯現

關閉選單效果：使選單display="none"隱藏

全部程式碼（程式碼之後有詳解）：

    document.addEventListener("click",clickHidden);//所有元件新增點選事件

    var mn=document.getElementById('menu');//獲取選單節點，選單id為menu
    function clickHidden(eve)
    {
        if( eve.target.id!="menu" )//點選的如果不是選單，選單隱藏。如果是選單，選單顯現
    	mn.style.display="none";
    }
 

我們如何判斷是否點選了選單之外的地方呢？

這裡我們想到一個辦法，給窗體所有元件新增事件，當點選時，使選單display="none"。當點選的是選單時，便使選單display="block"

這裡我們使用到的方法是addEventListener()

語法

element.addEventListener(event, function, useCapture)

我們需要監聽全頁面的單擊事件,所以我們的物件是document

document.addEventListener("click",clickHidden);

這裡我們注意有個問題：

當你給一個div設定了點選方法，這個div中還有其他元素。

那麼實際點選的時候，並沒有點選到目的div，因此無法觸發點選事件。

解決方法：

方法一:直接將點選事件繫結到可能點選到的最上層元素。

方法二:css調節z-index

首先要考慮的是更外層的元素遮擋了靠裡層的元素。比如外層遮擋為一個div（.card）被遮擋的是一個input框為（.input-space）
這時就要把遮擋它的元素的css中的z-index調的比他要低，假設：外層遮擋的類名為：card，被遮擋的input的類名為：input-space。

.card{
    z-index:1;
}
.input-space{
    z-index:2;
}

方法三:寫完之後看input框能不能選到（點選事件生不生效）。如果還是選不到（點選事件不生效），就在這個基礎上為card再加一層css， pointer-events:none，此css以為滑鼠事件對當前元素無效。

.card{
    pointer-events: none;
}