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

Question

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

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