对于同一页面导航（#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>