Question

我在这里以及整个互联网上看到过很多关于此的问题，我仍然无法找到适合我的解决方案。这是我的菜单代码，用bootstrap制作。当你在小屏幕上点击它时，它工作正常，但是，除非我点击关闭标志，否则我无法关闭它。当我点击其中一个链接时，或者至少当我点击页面中的菜单外，我想关闭它。

\'

我正在尝试此代码，但它不起作用：

a string literal

以下代码在我的main.js文件中有效。它适用于.menu-close中的单击，但如果我为body或html更改它不起作用。这是为什么？

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

Answer 1

尝试以下内容：

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

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

还找到了这个：http://www.bootply.com/63158

关闭菜单点击外面

1 个答案: