JS 脚本阻止 bootstrap 导航切换，为什么？

Question

我有一个网站，每个页面都使用 bootstrap toggle/collapse 导航栏。除一个页面外，所有页面都可以正常工作。出于某种原因，在其中一个页面上，导航栏会折叠一次到适当的屏幕尺寸，但不会下拉。但是，我注意到如果我注释掉我在 html 底部获取的 JS 文件，就像  一样，那么下拉列表就会起作用。奇怪的是，同一站点上的其他 2 个页面使用相同的 JS 脚本，并且下拉菜单仍然有效……也许我只是瞎了眼。导航代码如下：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>
            <a class="navbar-brand" href="index.html">Home</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="page.html">Content</a>
                </li>
                <li>
                    <a href="page.html">Content</a>
                </li>
                <li>
                    <a href="page.html">Content</a>
                </li>
                <li>
                    <a href="page.html">Content</a>
                </li>
                <li>
                    <a href="page.html">Content</a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div> <!-- /.container -->
</nav>

老实说，JS 不多，只有一个滚动函数，还有另一个 "hover" 函数，我最终可能会移至 CSS..

$(document).ready(function() {
        $(".business-header img").on("click", function( e ) {

            e.preventDefault();

            $("body, html").animate({ 
                scrollTop: $(".section-two").offset().top 
            }, 1500);

        });
    });

    $(".image-wrapper img").mouseenter(function() {
        $(this).css("box-shadow", " 0 0 30px #F0DEBD");
    }).mouseleave(function() {
            $(this).css("box-shadow", "none");
});

我还要提一下，每个页面都有相同的导航。是否存在导致此问题的功能之一？我试图在其他帖子上搜索这个主题，但没有成功。干杯

Answer 1

大多数情况下，这是由于 bootstrap js 库被加载了不止一次

JS 脚本阻止 bootstrap 导航切换，为什么？

JS Script preventing bootstrap nav from toggling, why?

html

javascript

navbar

twitter-bootstrap