Скрыть меню при нажатии за его пределами

Question

Я хотел бы скрыть свое меню, когда я нажимаю на него. Я пробовал много вещей, но я должен сделать что-то неправильно, и у меня слишком мало знаний в Javascript, чтобы справиться с этим.

Вот Html

<header id="header"> 
      <div id="showLeftPush"> 
       <div class="toggle"> 
        <div class="one"></div> 
        <div class="two"></div> 
        <div class="three"></div> 
       </div> 
      </div> 
      <img src="img/LOGO_HCS.svg" alt="Logo Here Comes the Sun"> 
     </header> 
     <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left"  id="cbp-spmenu-s1"> 
      <img class="scrollTo" href="#header" src="img/LOGO_HCS_WHITE.svg" alt="logo here comes the sun"> 
      <a class="scrollTo" href="#apropos">ABOUT</a> 
      <a class="scrollTo" href="#finishing">FINISHES</a> 
      <a class="scrollTo" href="#news">NEWS</a> 
      <a class="scrollTo" href="#contact">CONTACT</a> 
      <div class="trait"></div> 
      <a class="secondBloc" href="http://www.lampegras.fr/"><b>LAMPE GRAS</b></a> 
      <a class="secondBloc" href="http://www.schottlander.fr/"><b>LAMPE MANTIS</b></a> 
      <a class="secondBloc" href="http://www.inthetube.fr/"><b>LAMPE IN THE TUBE</b></a> 
      <a class="secondBloc" href="http://www.surpil.fr/"><b>CHAISE SURPIL</b></a><br/> 
      <a class="secondBloc" href="http://www.dcwe.fr/"><b>by<br/>DCW éditions</b></a> 
      <div class="trait"></div> 
      <a class="secondBloc" href="https://www.facebook.com/lampegras"><b>Facebook</b></a> 
      <a class="secondBloc" href="https://fr.pinterest.com/collectivea/dcw-editions/"><b>Pinterest</b></a><br><br> 
      <a class="langue" id="en" href="index.html">En</a> 
      <a class="langue" href="index_fr.html">Fr</a> 
     </nav> 

Вот сценарий

<script> 
     var menuLeft = document.getElementById('cbp-spmenu-s1'), 
      showLeftPush = document.getElementById('showLeftPush'), 
      body = document.body; 
     showLeftPush.onclick = function() { 
      classie.toggle(this, 'active'); 
      classie.toggle(body, 'cbp-spmenu-push-toright'); 
      classie.toggle(menuLeft, 'cbp-spmenu-open'); 
      disableOther('showLeftPush'); 
     }; 
     function disableOther(button) { 

      if(button !== 'showLeftPush') { 
       classie.toggle(showLeftPush, 'disabled'); 
      } 
     } 
    </script> 

Большое вам спасибо за вашу помощь!

Answer 1

Как насчет чего-то подобного?

$(document).mouseup(function (e){ 
    var container = $("#your-menu-div"); //Your menu div 
    var container1 = $("#your-menu-icon"); //Your menu icon 

    if (!container.is(e.target) // if the target of the click isn't the container... 
     && container.has(e.target).length === 0 // ... nor a descendant of the container 
     &&!container1.is(e.target) // if the target of the click isn't the container... 
     && container1.has(e.target).length === 0 // ... nor a descendant of the container 
    ){ 
     container.hide(); 
    } 
}); 

Answer 2

Почему бы не использовать css? по google dropdown css вы найдете много образцов, чтобы скрыть и показать на css. вы не хотите использовать раскрывающийся список, но в этом случае вы найдете что-то вроде этого. Вы можете использовать наведению мыши или другие хорошие функции