How to make the menu auto-hide in the mobile version (bootstrap)?

Question

JavaScript

Guys. There is a menu. Works completely. But in the mobile version, when you expand the menu and follow the link inside the document, the form with the menu continues to hang. To hide it, you need to press the button again.
I do it on bootstrap.

<!-- Меню -->
    <div class="navbar navbar-inverse navbar-fixed-top" ">
    	<div class="container">
    		<div class="navbar-header">
    			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    			</button>
    			
    			<a class="navbar-brand" href="index.php" style="text-shadow: 1px 1px 1px #5EBDE7;"><img src="img/logo.svg" alt="Twitter" style="width: 20px; height: 20px; ">super-cleaning</a>
    			<div class="vspis" style="display: inline-block; margin-left: 15px; ">
    			<ul class="nav navbar-nav " ><li class="dropdown" ><a class="dropdown-toggle" href="#"><i class="glyphicon glyphicon-map-marker" aria-hidden="true" style="margin-right: 5px; color: #5EBDE7;"></i>Москва</a>
    				<ul class="dropdown-menu gorod">
    				
    			<?php
      $stmt = $pdo->prepare('SELECT * FROM `cities` WHERE `id` ORDER BY city_num ASC');
      $stmt->execute();
      while ($row = $stmt->fetch(PDO::FETCH_LAZY))
      {
        echo " 	
    				
                      <li><a  href="."http://".$row['city_short'].".".site_domain."".">".$row['city_full']."</a></li>";
      }
  ?>
                      
                      
                      
                  </ul>
    				
    				</li></ul></div>
    				
  
    				
    			
    		</div>
    		<div class="navbar-collapse collapse text-center">
    		<div class="vspis" style="display: inline-block; margin-left: -30px; ">
    		    
    			<ul class="nav navbar-nav ">
    			
    			<li><a href="index.php" class="page-scroll">Главная</a></li>
    				<li class="dropdown" ><a class="dropdown-toggle" href="#">Клининг</a>
    				<ul class="dropdown-menu">
                      <li><a  href="genuborka.php">Генеральная уборка</a></li>
                      <li><a href="remontuborka.php">Уборка после ремонта</a></li>
                      <li><a href="podderzuborka.php">Поддерживаюшая уборка</a></li>
                      <li><a href="moykaokon.php">Мойка окон</a></li>
                      <li><a href="khimchsitka.php">Химчистка</a></li>
                      <li><a href="uborkachp.php">Уборка после ЧП</a></li>
                      <li><a href="cleaneram.php">Вакансии</a></li>
                  </ul>
    				
    				</li>
    				<li><a href="#table" class="page-scroll">Цены</a></li>
    				<li><a href="#text-1col" class="page-scroll">Калькулятор</a></li>
    				<li><a href="#items-3col" class="page-scroll">Акции</a></li>
    				<li><a href="yurlitsam.php">Юридическим лицам</a></li>
    			</ul></div>    		
    			<ul class="nav navbar-nav navbar-right">
    				<li><p class="nn" style="padding: 10px;">
    				
    				
<?php	

$link = mysqli_connect($db_host, $db_user, $db_password, $db_database) 
    or die("Ошибка " . mysqli_error($link)); 
     
$query ="SELECT * FROM telefon ORDER BY id DESC";
 
$result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link)); 


if (mysqli_num_rows($result) > 0)
{
 $row = mysqli_fetch_array($result); 
 
 do
 {
  
             echo '			
    				
    				<a href="tel:'.$row["ssilka"].'">'.$row["telefon"].'</a></p></li>
    				
  								';
}
    while ($row = mysqli_fetch_array($result));
}							
              
 ?> 	  		
    			
    			</ul>
    		</div>
    	</div>
    </div>

Tried to do it like this:

<script>
$(document).on('click', 'a.page-scroll', function(event) {
  var $anchor = $(this);
  $('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top - 50
  }, 800, 'easeInOutExpo');
  event.preventDefault();
});
  </script>

  <script>
$('.navbar-nav a').on('click', function() {
  if ($('.navbar-toggle').css('display') != 'none') {
    $(".navbar-toggle").trigger("click");
  }
});
  </script>

Answer 1

DECISION:

$(function(){ 
     var navMain = $(".navbar-collapse"); 
     navMain.on("click", "a:not([data-toggle])", null, function () {
         navMain.collapse('hide');
     });
 });

Answer 2

Once upon a time I stuck this if:
Returns true if the user is not from the computer. I don't know how reliable it is, but I've been using it for a long time and it has never let me down.