在移动版本中单击导航链接时如何隐藏引导菜单答案

【问题标题】：How to Hide the Boostrap menu when click on nav links in mobile version在移动版本中单击导航链接时如何隐藏引导菜单
【发布时间】：2018-09-18 07:50:36
【问题描述】：

我创建了单页网站。我使用引导程序menu 平滑滚动。当用户单击特定部分时，该部分将使用平滑滚动进行定位。桌面没有问题。

但说到手机版，

当我点击功能时，它会以平滑滚动的方式定位功能部分，但菜单仍显示在移动设备上，但当我点击功能部分时，引导下拉菜单应关闭。

请查看我的代码：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>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：