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在 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不会被隐藏。

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

2 个答案: