divをonlickでトリガーしたときにdivをトグル/再表示する方法は？

Question

DIV 1をクリックすると、ドロップダウンが表示されます。デフォルトのタブをクリックするか、ページの他の場所をクリックしてドロップダウンメニューを切り替えると、ドロップダウンが非表示になります。私はこのためにJavaScriptコードを書いていますか？ドロップダウンのための

HTML

<div id="dropdown-container"> 
    <div id="default-tab" onclick="toggleMenu()"><a href="#">1</a></div> 
     <ul id="dropdown"> 
      <li ><a href="#"><span class="current-browse">2</span></a> 
       <ul class="dropdown-items"> 
        <li class="dropdown-item"><a href="#">3</a></li> 
        <li class="dropdown-item""><a href="#">4</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

Javascriptを

function toggleMenu() { 
    var dropDown = document.getElementById('dropdown');  
    if(dropdown.style.display == "block") { 
     dropdown.style.display = "none"; 
    } else { 
     dropdown.style.display = "block"; 
    } 
} 

CSSは表示がありません：なし。

Answer 1

This articleあなたが直面している問題の優れた解説で、そしてなぜのstopPropagationソリューションは悪い考えです。それはあなたのページ上の何かが、予期せぬ作成せずにクリックされるたびにメニューを非表示にするあなたのtoggleMenu機能の外側と

document.onclick = function(event) { 
    if (!event.target.closest('#dropdown-container')) { 
    dropdown.style.display = "none"; 
    } 
} 

ドロップ：あなたはもっとこのようになります。何をしたいのかはJQueryを使用していないので、他のライブラリの動作（バグ）。

Answer 2

LINK：http://stackoverflow.com/questions/321239/event-on-a-click-everywhere-on-the-page-outside-of-the-specific-div.

あなたは上記のリンクからソリューションのいずれかを使用することができます。必要なのは、documentオブジェクトのonclickイベントにハンドラを追加する方法だけです。

DIV 1でonclickイベントが発生した場合、コードは既に正常に動作しています。ただし、最初のクリックでは機能しません。だから、マークアップには次のように追加してください。

<ul id="dropdown" style="display:block;">