Javascript 如何在单击菜单项时关闭Twitter引导3折叠导航栏

我知道这已经在其他帖子中讨论过了，但我对网站的总体编码非常陌生，当我尝试使用其他人提出的解决方案时，它们似乎不起作用。如果我的术语不太正确，我向你道歉，但希望你能理解

在我在本地主机上构建的站点上，我拥有它，因此我使用的引导导航栏在桌面、平板电脑和移动设备上保持折叠状态。导航栏是一个粘性导航，当您从菜单中选择一个项目时，它会向下滚动到该项目的定位点。问题是，由于单击某个项目时菜单保持打开状态，因此下拉列表覆盖了它所定位到的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>

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

如果可以的话，尽量描述你的答案，因为重申一下，我对这一点非常陌生，我仍在学习过程中

非常感谢，

---

Angela

您应该在页面的最底部添加一个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>

---

您是否尝试过使用滚动导航引导主题


导航栏会固定在顶部，当您向下导航站点时，div不会隐藏。
执行此操作后，我的导航栏将无法打开。。。有什么想法吗？我的错，我以前的代码是错误的，我已经编辑了它如果这不起作用，添加一个JSFIDLE页面plz，你的代码不起作用，我会查看它。我以前的代码的错误是，点击它总是隐藏navebar。
 <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>