Menü auf Klick außerhalb schließen

Question

Ich habe viele Fragen dazu hier und im Internet gesehen und ich kann immer noch keine Lösung finden, die für mich funktioniert. Dies ist der Code meines Menüs, der mit Bootstrap erstellt wurde. Es funktioniert gut, wenn Sie es in kleinen Bildschirmen anklicken, aber ich kann es nicht schließen, wenn ich nicht auf das Schließen-Symbol klicke. Ich möchte es schließen, wenn ich auf einen der Links klicke oder zumindest wenn ich außerhalb des Menüs auf der Seite klicke.

<header id="main-nav"> 
<div class="container"> 
    <a id="navigation" href="#"><i class="fa fa-bars"></i></a> 
    <div id="slide_out_menu" > 
    <a href="#" class="menu-close"><i class="fa fa-times"></i></a> 
    <div class="logo"><img src="images/asesoria-arturo-soria.png" alt="Asesoría Arturo Soria Logo" title="Asesoría Arturo Soria"></div> 
    <ul> 
     <li><a href="#servicios" class="smoothScroll">Servicios</a></li> 
     <li><a href="#autonomos" class="smoothScroll">Autónomos</a></li> 
     <li><a href="#empresas" class="smoothScroll">Empresas</a></li> 
     <li><a href="#startups" class="smoothScroll">Startups</a></li> 
     <li><a href="#contacta" class="smoothScroll">Contacta</a></li> 
     <li><a class="sociales" href="https://www.facebook.com/Asesoria-Arturo-Soria-120615058061098/?fref=ts" target="_blank"><i class="fa fa-facebook"></i></a> 
     <a class="sociales" href="https://www.linkedin.com/in/asesoria-arturo-soria-a0130143" target="_blank"><i class="fa fa-linkedin"></i></a></li> 
     </ul> 
    <div class="slide_out_menu_footer"> 
     <div class="more-info"> 
     <p>Creado y diseñado por <a href="http://hdeprada.com/">Hdeprada.com</a> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-4"> 
     <ul class="left"> 
    <li><a href="#autonomos" class="smoothScroll">Autónomos</a></li> 
    <li><a href="#empresas" class="smoothScroll">Empresas</a></li> 
    <li><a href="#startups" class="smoothScroll">Startups</a></li> 
    </ul> 
    </div> 
    <div class="col-md-4 text-center"> 
     <a href="#header" class="logo smoothScroll"><img src="images/asesoria-arturo-soria.png" alt="Asesoría Arturo Soria Logo" title="Asesoría Arturo Soria"></a> 
    </div> 
    <div class="col-md-4"> 
     <ul class="right"> 
     <li><a href="#servicios" class="smoothScroll">Servicios</a></li> 
     <li><a href="#contacta" class="smoothScroll">Contacta</a></li> 
     <li><a href="https://www.facebook.com/Asesoria-Arturo-Soria-120615058061098/?fref=ts" target="_blank"><i class="fa fa-facebook"></i></a></li> 
     <li><a href="https://www.linkedin.com/in/asesoria-arturo-soria-a0130143" target="_blank"><i class="fa fa-linkedin"></i></a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

ich diesen Code zum Beispiel bin versucht, und es funktioniert nicht:

$('html').click(function() { 
    $('#slide_out_menu').hide(); 
}); 

$('#slide_out_menu').click(function(event){ 
    event.stopPropagation(); 
}); 

Der folgende Code in meiner main.js Datei arbeitet. Es funktioniert auf den Klick in .menu-close, aber wenn ich es für Body oder HTML ändern, funktioniert es nicht. Warum ist das?

$('#navigation').on('click', function(e){ 
     e.preventDefault(); 
     $(this).addClass('open'); 
     $('#slide_out_menu').toggleClass('open'); 

     if ($('#slide_out_menu').hasClass('open')) { 
      $('.menu-close').on('click', function(e){ 
       e.preventDefault(); 
       $('#slide_out_menu').removeClass('open'); 
      }); 
     } 
    }); 

}); 

Answer 1

so etwas wie die folgenden Versuchen:

$("body").on("click", function(e) { 
    $(".collapse").collapse("hide"); 
}); 

http://getbootstrap.com/javascript/#collapse

fanden auch diese: http://www.bootply.com/63158