Navbar collapsing after selection?

Question

When using the navbar bootstrap on a mobile phone it does not return to normal after clicking on option menu.

In the following example the navigation bar is replaced by a button in the upper right corner. Only when this button is clicked the menu disappears. How do I close it after selecting a navbar item?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

Answer 1

Good afternoon my friend, first thank you to Marconi for his time and help, I would like to leave here a little update and correction to the favor that he did to us. The . Nav n is class, so it’s $('Nav a') .... and the class to be clicked is missing an R, is Toggler. Below some things q may be interfering beyond the code.

1- As I’ve read, there are people q may have put to load bootstrap.js and jquery.js twice
2-Insert this script ONLY AFTER you have called the jquery.js script, if insert before it n will have loaded the jquery and then n will process right, then load the jquery before, then load the block("function") q uses it.

below the updated/fixed code following the posted above:

$('nav a').on('click', function(){
   $('.navbar-toggler').click();
});

However, when it goes to the desktop it gets this block too and gets bad. To avoid this I made a media query for screens smaller than tablet, if you only want to change the 768 in mobile by 576.

Below the code with media query, and for my project that has my logo as home button, was giving problem, because the block asked for everything that is link(a) on Nav, and it followed this p this logo/ button home, so I wanted to go back to home, clicked on it and it opened the menu, to correct this I called the class. navbar-Nav and only what is link(a) within it) :

x = window.screen.width;
if(x <= 768){
  $('.navbar-nav a').on('click', function(){
      $('.navbar-toggler').click();
  });
}

My first post here, I hope you help someone, after all by helping us learn more. A hug!

Answer 2

From what I understand you want to "collapse" the menu after selecting some item, when the layout is on a smaller device.

Just add the following jquery:

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click() //bootstrap 3.x
});

See working here.

$('.nav a').on('click', function(){
    $('.navbar-toggle').click();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>