Question

我已经创建了一页的网站。我已将引导程序menu与平滑滚动一起使用。当用户单击特定部分时，该部分将以平滑滚动作为目标。在桌面上没有问题。

但是对于移动版本，

当我单击Feartures时，它以平滑滚动为目标，定位到Featues部分，但菜单仍显示在移动设备上，但是当我单击Feature部分时，bootstrap下拉菜单应关闭。

请检查我的代码：http://floretmedia.net/temp/pbee/

 <script type="text/javascript">
   $(document).ready(function(){
     $(".navbar-toggle").click(function(){
       if($(".navbar-nav li a")attr("href")){
         $(".navbar-toggle in").css("display", "none!important");
       }else{
         $(".navbar-toggle in").css("display", "block");
       }
     });
     function handler(click) {
    var target = $(".navbar-nav li a");
  if ( target.is(".navbar-nav li a")) {
    target.children().toggle();
  }
}
$("navbar-toggle").click( handler ).find(".collapsed").show();
   });
 </script>

<header>
  <div class="custom-container">
    <div class="header-right">
      <div class="navbar-holder"> <!-- navbar-holder -->
        <nav class="navbar navbar-default"> <!-- navbar-inverse -->         
           <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed blue" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <div class="ease cf">
                <a class="navbar-brand" href="./">
                   <img src="images/logo.png" alt="sfatech Logo">
                </a>
              </div> 
           </div> <!-- /.navbar-header -->
             <div id="navbar" class="collapse navbar-collapse cf"> <!-- nav-collapse -->
                <ul class="nav navbar-nav navbar-right navbrdr">
                  <li class="active"><a href="./">HOME </a></li>
                  <li><a href="#features"> FEATURES </a></li>
                  <li><a href="#plans">PRICING</a></li>
                  <li><a href="#contact">CONTACT</a></li>
                  <li><a href="includes/enquiry_form.php" class="signup fancybox" data-fancybox-type="iframe">SIGN UP</a></li>                 
                </ul> <!-- /.navbar-nav -->

             </div> <!--/.nav-collapse -->           
         </nav> <!-- /.navbar-inverse -->
      </div> <!-- /.navbar-holder -->
   </div><!-- header-right -->
  </div><!-- custom-container -->
</header>

Answer 1

var mobileMenuButtons = $('.navbar-nav li a');

mobileMenuButtons.on('click', function() {
  if ($( document ).width() < 768) {
    $('.navbar-toggle').click();
  }
});

此代码添加了您的js文件。祝你好运：）

Answer 2

Navbar使用Bootstrap折叠插件，因此您可以手动调用它，而不必处理视口宽度检测（可能不可靠）：

$('.navbar-nav > li > a').on('click', function() {
    $('.navbar-collapse').collapse('hide');
});

单击移动版本中的导航链接时如何隐藏Boostrap菜单

2 个答案: