单击外部时关闭菜单

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