上點擊關閉菜單之外

Question

我看到這個在這裏和所有在互聯網上的許多問題，我仍然不容得爲我工作的解決方案。這是我的菜單的代碼，用bootstrap製作。當你在小屏幕上點擊它時它可以正常工作，但是，除非點擊關閉標誌，否則我無法關閉它。我想點擊其中一個鏈接或至少當我點擊頁面菜單之外時關閉它。

<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> 

我想例如此代碼，這是行不通的：

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

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

下面的代碼在我main.js文件的工作。它在.menu-close中的點擊工作，但如果我更改爲body或html，它不起作用。爲什麼是這樣？

$('#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

嘗試類似如下：

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

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

也發現了這個：http://www.bootply.com/63158