javascript - 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 。单击链接后，较小设备上显示的引导菜单不会关闭。我看过一些例子，即使是那些应该有效的例子，但没有。单击菜单中的链接后它仍然不会关闭。一位用户发布了这个 fiddle ，据说它可以工作，但当我在 Chrome 中尝试时，它就是不工作。选择某些内容后，菜单不会折叠。我究竟做错了什么？这个fiddle有效，但我太笨了，无法将其应用到我的网站上。

请帮忙!

Answer 1

它可能不起作用，因为您将其包含在 bootstrap.js 中，但没有包含在 bootstrap.min.js 中，而 bootstrap.min.js 似乎会接管手机等小屏幕尺寸。将您的代码包含在 bootstrap.js 和 bootstrap.min.js 文件的底部，并且在单击/按下内部 anchor 的链接后导航栏应该折叠(无论您是在手机上执行该操作 (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 代码是为了解决该问题。