Bootstrap navbar close

Navigation
1
Hello, I'm using bootstrap version 4.0 beta-2, and I have a question, how do I close the navbar menu after clicking on an item in the list? By default it is necessary to click on the item and click again on the menu to close it.

I found a solution to this on the internet, but it was all using old versions of Bootstrap, and apparently does not work on my o.o '.

code 

   <nav class="navbar navbar-expand-lg navbar-dark bg-default">
     <span class="navbar-brand" align = "center">
       <h2 class = "font-weight-light text-justify"><em>A s t r o </em> mania</h2>
     </span>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarText">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
             <a class="nav-link" href="#Inicio">Home<span class="sr-only">(current)</span></a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="#">Features</a>
         </li>
         <li class="nav-item">
             <a class="nav-link" href="#">Pricing</a>
         </li>   
       </ul>
       <span class="navbar-text" align = "center">
           O melhor counteúdo de astronomia você encontra aqui no <em>A s t r o</em> mania.
       </span>
     </div> 
   </nav>
    
asked by anonymous 12.11.2017 / 05:02

1 answer

2

In Bootstrap 4 (as specified in the question, but should work in recent previous versions) the menu will close when you click on an item in the menu list, with the following jQuery listener: 

$(".nav-link").on("click", function(){
   $('.navbar-collapse').collapse('hide');
});


$(".nav-link").on("click", function(){
   $('.navbar-collapse').collapse('hide');
});
html, body, nav{ background: #000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-default">
  <span class="navbar-brand" align = "center">
    <h2 class = "font-weight-light text-justify"><em>A s t r o </em> mania</h2>
  </span>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
          <a class="nav-link" href="#Inicio">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
      </li>   
    </ul>
    <span class="navbar-text" align = "center">
        O melhor counteúdo de astronomia você encontra aqui no <em>A s t r o</em> mania.
    </span>
  </div> 
</nav>
    
12.11.2017 / 05:23
Call functions for ajax request inside callback Checkbox inside While