Навигация начальной загрузки не разрушается на экране мобильного устройства для навигации по той же странице (#sections)?

Question

Я хочу использовать навигацию на той же странице, используя разделы (#sections), она работает нормально на всех устройствах, кроме устройств xs, когда я нажимаю на любую навигационную ссылку на мобильном устройстве, она идет в точный раздел, но параметры навигации не закрываются илисворачивается (потому что целевая ссылка на той же странице)

Я использую начальную навигацию

<nav class="navbar navbar-default">
   <div class="container-fluid"> 
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar" style="background-color: white;"></span>
        <span class="icon-bar" style="background-color: white;"></span>
        <span class="icon-bar" style="background-color: white;"></span>                        
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>


    <div class="collapse navbar-collapse navbar-right" id="myNavbar">
      <ul class="nav navbar-nav" >
        <li><a class="scroll" href="#home"><i class="fa fa-home"></i>Home</a></li>
        <li><a class="scroll" href="#about"><i class="fa fa-cog"></i>About us</a></li>
        <li><a class="scroll" href="#products"><i class="fa fa-cubes"></i>Products</a></li>
        <li><a class="scroll" href="#gallery"><i class="fa fa-camera-retro"></i>Gallery</a></li>
        <li><a class="scroll" href="#contact"><i class="fa fa-pencil"></i>Contact Us</a></li>
      </ul>     
    </div>
    </div>

</nav>  

, когда я нажимаю опцию навигации в мобильной навигации, должен закрыться, и это приведет меня к точному разделу, какя могу это сделать?

Answer 1

Вы можете достичь этого, используя jquery

$('.nav li a').click(function(e) {
		$('.navbar-toggle').click();
 });

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

<nav class="navbar navbar-default">
   <div class="container-fluid"> 
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar" style="background-color: white;"></span>
        <span class="icon-bar" style="background-color: white;"></span>
        <span class="icon-bar" style="background-color: white;"></span>                        
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>


    <div class="collapse navbar-collapse navbar-right" id="myNavbar">
      <ul class="nav navbar-nav" >
        <li><a class="scroll" href="#home"><i class="fa fa-home"></i>Home</a></li>
        <li><a class="scroll" href="#about"><i class="fa fa-cog"></i>About us</a></li>
        <li><a class="scroll" href="#products"><i class="fa fa-cubes"></i>Products</a></li>
        <li><a class="scroll" href="#gallery"><i class="fa fa-camera-retro"></i>Gallery</a></li>
        <li><a class="scroll" href="#contact"><i class="fa fa-pencil"></i>Contact Us</a></li>
      </ul>     
    </div>
    </div>

</nav>
<div id="home" style="height:500px;"></div>
<div id="gallery" style="height:500px;"></div>
<div id="contact" style="height:500px;"></div>


<div id="home" style="height:500px;"></div>
<div id="gallery" style="height:500px;"></div>
<div id="contact" style="height:500px;"></div>