title: Closing a div by clicking outside and clicking a button
body: <p>i am trying to setup a dropdown menu, that can be closed by clicking outside (the opened div) and by clicking the button/img (that opens the div).</p>
  
  <p>Image with onclick funtion:</p>
  
  <pre><code>&lt;img onclick="hide()" id="menu" src="...."&gt;
  </code></pre>
  
  <p>Dropdown list that should be opened and closed, class declares dropdown as <strong>display:none</strong>:</p>
  
  <pre><code>&lt;ul id="dropdown" class="dropdown-breadcrumb"&gt;
     &lt;li&gt;...&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is my solution so far:</p>
  
  <pre><code>function hide() {
      var x = document.getElementById("dropdown");
  
      if (x.style.display === "none") {
          x.style.display = "block";
      } else {
          x.style.display = "none";
      }
  }
  </code></pre>
  
  <p>When i am trying to add a function that closes the dropdown when the user clicks outside the dropdown:</p>
  
  <pre><code>window.addEventListener('mouseup',function(event){
          var dropd = document.getElementById('dropdown');
  
          if(event.target != dropd &amp;&amp; event.target.parentNode != dropd){
              dropd.style.display = 'none';
          }
  });
  </code></pre>
  
  <p>Then i end up with a opened dropdown because the onclick-function starts.</p>
  
  <p>Can someone help me to combine those functions? Thank you!</p>