导航栏菜单未关闭（单击菜单和 li 元素）

Posted 2023-04-13

【中文标题】导航栏菜单未关闭（单击菜单和 li 元素）

【英文标题】：Navbar menu not closing (With click on menu and li elements)

【发布时间】：2016-03-26 05:48:38

【问题描述】：

我已经尝试了多种解决方案来解决我在堆栈上找到的这个问题，但我似乎仍然无法解决我的特定问题。这就是我正在处理的http://dev.joneslewis.co.uk/。如您所见，在移动视图中，无论我单击 li 元素还是菜单本身，汉堡菜单一旦打开就不会折叠。由于该网站是基于锚定的，这真的很痛苦......

这是我目前正在使用的 html 和 Js...

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" rel="home" href="#">
     <img class="img-responsive" style="max-width:35px; margin-top: -7px;"
          src="#"/>
      </a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#about">About</a></li>
        <li><a a data-toggle="collapse" data-target=".navbar-collapse" href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

javascript...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://joneslewis.co.uk/bootstrap/jquery.js"></script>
      <script src="http://joneslewis.co.uk/bootstrap/bootstrap.min.js"></script>
      <script>
      $(document).ready(function () 
    $(".navbar-nav li a").click(function(event) 
        $(".navbar-collapse collapse").collapse('hide');
    );
);
      </script>

【问题讨论】：

我在您的站点上尝试了解决方案***.com/a/21967883/639406 并且它的工作原理，试试这个代码...如果它解决了您的问题，您可以投票赞成答案 [仅供参考 - 它不是我写的]问题

Bootstrap 3 collapsed menu doesn't close on click的可能重复

这看起来不像是一个重复 - 此用户已经在使用其他问题中推荐的修复程序。

【参考方案1】：

似乎选择器不正确。我试过了，我可以选择组件并隐藏菜单。

$(".navbar-collapse.collapse").collapse('hide')