单击移动视图时隐藏导航（滚动一页）答案

【问题标题】：hide nav when click mobile view (scroll one page)单击移动视图时隐藏导航（滚动一页）
【发布时间】：2018-03-14 07:35:03
【问题描述】：

点击链接时如何隐藏导航栏？下面是我的代码。我正在尝试stackoverflow中提供的一些代码，但它不起作用。你能帮我解决我的问题吗？

 <!-- Navigation -->
<div id="nav">
  <nav class="navbar navbar-custom">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fa fa-bars"></i> </button>
        	<a class="navbar-brand page-scroll" href="#page-top">
        	<div class="hover13">
				<figure><img src="img/Julius-Logo-header4.png" alt="" class="img-responsive"></figure>
			</div>
			</a>
        
      
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
        <ul class="nav navbar-nav">
          <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
          <li class="hidden"> <a href="#page-top"></a> </li>
          <li> <a class="page-scroll" href="#about">About</a> </li>
          
          <li> <a class="page-scroll hidden-xs hidden-sm" href="#offer">What we offer</a> </li>
          		<li> <a class="page-scroll hidden-lg hidden-md" href="#offer1">What we offer</a> </li>
          <li> <a class="page-scroll" href="#photos">Project</a> </li>
          
          <li> <a class="page-scroll  hidden-xs hidden-sm" href="#blogs">Blogs</a> </li>
          		<li> <a class="page-scroll hidden-lg hidden-md" href="#blogs1">Blogs</a> </li>
          
          <li> <a class="page-scroll" href="#event">Events</a> </li>
          <li> <a class="page-scroll" href="#contact">Contact</a> </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

【问题讨论】：

标签： php jquery twitter-bootstrap

【解决方案1】：

使用 jQuery：

$(document).ready(function() {
  $(".navbar-toggle").click(function() {
    $(".navbar-main-collapse").toggleClass('hiddenNav');
  });
});

在你的 CSS 中使用这个类：

.hiddenNav {
  display: none;
  visibility: hidden;
}

【讨论】：

感谢@GrowingBrick 的回复。我尝试了您给定的代码，但问题是所有导航链接都被隐藏了。
是的，这不是你问的吗？如果您想隐藏整个导航栏，请将 .navbar-main-collapse 选择器更改为 #nav 但切换按钮也会被隐藏，因为它位于同一个容器内

【解决方案2】：

我已阅读您的问题，您想在单击链接时隐藏导航栏。这在 Jquery 中非常简单。在 jquery 中使用 .hide() 内置函数。代码如下

$("#hidenavbarlink").click(function(){
     $("#nav").hide();
});

希望对您有所帮助

【讨论】：

感谢您的回复@Sheraz，我尝试了您给出的代码，但它仍然是一样的。单击时无法关闭/隐藏导航。