Bootstrap导航栏不会在移动设备上崩溃

Question

我一直在努力工作几个小时。看了几个关于starkoverflow的例子。但我无法解决它。有人建议添加：

$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
        $(this).collapse('hide');
    }
});

但我不知道在哪里添加它。我尝试将它添加到bootstrap.js但它没有用。我是一个新手，试图通过学习拼凑一个来建立第一个网站。这是我正在编辑的网站：。单击链接后，较小设备上显示的引导菜单不会关闭。我看过一些例子，即使是那些应该工作的例子，但事实并非如此。单击菜单中的链接后，它不会关闭。一个用户发布了这个小提琴，据说可以正常工作，但是当我在Chrome中尝试时，它却没有。选择了某些内容后菜单不会崩溃。我究竟做错了什么？这fotroviciliji.si有效，但我把它应用到我的网站上太愚蠢了。

请帮忙！

Answer 1

它可能没有用，因为你把它包含在bootstrap.js中但不包含在bootstrap.min.js中，它似乎可以接管像手机这样的小屏幕尺寸。将您的代码包含在bootstrap.js和bootstrap.min.js文件的底部，单击/按下指向内部锚点的链接后，导航栏应该会折叠（无论您是在手机上执行操作（bootstrap.min.js）还是减少平板电脑/桌面上的窗口大小（bootstrap.js）。

+function ($) {
    'use strict';
    $(document).on('click', 'navbar-collapse.in', function (e) {
        if ($(e.target).is('a')) {
            $(this).collapse('toggle');
        }
    });  
}(jQuery);

以上代码对我有用。我从另一个论坛检索了2-7行，我不记得在哪里。据我所知，从搜索网络的角度来看，内部链接不会刷新页面（例如，在单页网站中），导航栏只会在到达新页面时崩溃。上面的javascript代码是为了解决问题而创建的。

Answer 2

我已经尝试了几个小时。这对我来说很有用，我补充道：

        <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a class="scroll hidden" href="#home" data-toggle="collapse" data-target=".navbar-collapse"></a></li>
                    <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">PONUDBA<i class="fa fa-caret-down"></i></a>
          <ul class="dropdown-menu">
            <li><a class="scroll" href="#ponudba"  data-toggle="collapse" data-target=".navbar-collapse">Čili omake</a></li>
            <li><a class="scroll" href="#paste"  data-toggle="collapse" data-target=".navbar-collapse">Čili paste</a></li>
    <li><a class="scroll" href="#vlozeni"  data-toggle="collapse" data-target=".navbar-collapse">Vloženi čiliji</a></li>
    <li><a class="scroll" href="#ostalo"  data-toggle="collapse" data-target=".navbar-collapse">Ostalo</a></li>
          </ul>
        </li>
        <li><a class="scroll" href="#cenik"  data-toggle="collapse" data-target=".navbar-collapse">CENIK</a></li>
        <li><a class="scroll" href="#mesta"  data-toggle="collapse" data-target=".navbar-collapse">PRODAJNA MESTA</a></li>
        <li><a class="scroll" href="#kontakt"  data-toggle="collapse" data-target=".navbar-collapse">KONTAKT</a></li>
        <!-- <li><a class="scroll" href="#obrazec">OBRAZEC</a></li> -->             
      </ul>
    </div><!--/.nav-collapse -->

到每个菜单项。在选择了某些内容之后，菜单现在又重新开始了。