Я хочу использовать навигацию на одной странице с помощью разделов (#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>
когда я нажимаю параметр навигации в мобильной навигации, должен закрыться, и это должно привести меня к тому же разделу, как я могу это сделать?
Вы можете добиться этого, используя 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>