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中，但没有成功。 我是新手，试图通过学习组装一个网站来建立第一个网站。 这是我正在编辑的网站： fotroviciliji.si 。 单击链接后，较小设备上显示的引导菜单不会关闭。 我已经看过示例，即使是在这里应该起作用的示例，但也没有。 单击菜单中的链接后，它仍未关闭。 一位用户发布了这个小提琴，据说可以正常工作，但是当我在Chrome中尝试时，却没有奏效。 选择某些内容后，菜单不会折叠。 我究竟做错了什么？ 这种小提琴有效，但是我太傻了，无法将其应用于我的网站。

请帮忙！

Answer 1

它可能没有用，因为您将其包含在bootstrap.js中，但未包含在bootstrap.min.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 -->

到每个菜单项。 现在，在选择了某些内容之后，菜单会自动折叠起来。