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>

对于同一页面导航（#sections），引导程序导航不会在移动屏幕上崩溃吗？

1 个答案: