如何在单击菜单项时关闭 Twitter Bootstrap 3 折叠导航栏答案

【问题标题】：How to Close Twitter Bootstrap 3 Collapse Navbar upon Clicking a Menu Item如何在单击菜单项时关闭 Twitter Bootstrap 3 折叠导航栏
【发布时间】：2014-06-02 20:09:47
【问题描述】：

我知道这已在其他线程中讨论过，但我对网站编码一般都很陌生，当我尝试使用其他人提出的解决方案时，它们似乎不起作用。如果我的术语不太正确，我深表歉意，但希望您能理解！

在我在本地主机上构建的网站上，我拥有它，以便我使用的 Bootstrap 导航栏在台式机、平板电脑和移动设备上保持折叠状态。导航栏是一个粘性导航，当您从菜单中选择一个项目时，它会向下滚动到该项目的锚点。问题是，由于单击项目时菜单保持打开状态，因此下拉菜单会覆盖它所锚定到的部分 div。

这是我的导航栏的代码：

<nav class="navbar navbar-default" role="navigation">
                  <div class="container-fluid">

                       <div class="navbar-brand">
                           <h2>My Title</h2>
                       </div>

                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>

                    </div>


                        <?php
                            wp_nav_menu( array(
                                'menu'              => 'menu-1',
                                'theme_location'    => 'primary',
                                'depth'             => 2,
                                'container'         => 'div',
                                'container_class'   => 'collapse navbar-collapse',
                                'container_id'      => 'bs-example-navbar-collapse-1',
                                'menu_class'        => 'nav navbar-nav',
                                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                                'walker'            => new wp_bootstrap_navwalker())
                            );
                        ?>
                    </div>
</nav>

我见过这样的解决方案：

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

但是当我尝试将它添加到我的代码中时它不起作用。我一直把它放在我的脑海里，但我不确定那是否是我应该插入它的地方。我应该把它放在 bootstrap.js 文件中，还是应该下载另一个 javascript 库？

如果可以的话，尽量对你的回答进行描述，因为重申一下，我对此很陌生，我仍在学习中。

非常感谢，
安吉拉

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您应该在页面的最底部添加一个 javascript 部分（就在之前）从您粘贴的代码中，我假设您也已经加载了 jQuery 库（$. 相当于 jQuery.）

下面的代码使用jQuery在ID元素bs-example-navbar-collapse-1上添加一个事件

 <script src="http://code.jquery.com/jquery-1.11.1.min.js type="text/javascript"></script>
 <script>

     $("#bs-example-navbar-collapse-1").click('li', function() {
        var element = document.getElementById("#bs-example-navbar-collapse-1");
        if (element.className == ".navbar-toggle"){
              $(".navbar-toggle").collapse('hide');
        }else
          console.log("Navbar has to be opened");
     });

    </script>
</body>

【讨论】：

执行此操作后，我的导航栏无法打开...关于原因的任何想法？
我的错，我以前的代码是错误的，如果这不起作用，我已经编辑了它，添加一个 JSFiddle 页面，其中包含您的代码不起作用，我会看看它。跨度>
我之前的代码的错误是，点击它总是隐藏导航栏。

【解决方案2】：

您是否尝试过使用 Scroll-nav Bootstrap 主题？

https://startbootstrap.com/template-overviews/scrolling-nav/

导航贴在顶部，当您向下浏览网站时，div 不会被隐藏。

【讨论】：