单击菜单项后如何关闭Twitter Bootstrap 3折叠导航栏

Question

我知道这已经在其他主题中进行了讨论，但是我通常对网站编码非常陌生，当我尝试使用其他人提出的解决方案时，它们似乎无法正常工作。 对于我的用语不正确，我深表歉意，但希望您能够理解！

在我在本地主机上构建的站点上，我拥有它，以便我正在使用的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库？

如果可以的话，请尝试对您的答案进行描述，因为要重申一下，我对此还很陌生，并且我仍在学习中。

非常感谢，
安吉拉

Answer 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>

Answer 2

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

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

导航栏位于顶部，当您向下浏览该站点时，div不会隐藏。