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

Question

我有一个网站，每个页面都使用引导切换/折叠导航栏。除了一个之外，所有页面都可以正常工作。出于某种原因，在其中一个页面上，导航栏会折叠一次到适当的屏幕尺寸，但不会下拉。但是，我注意到，如果我注释掉一个 JS 文件，我将在 html 的底部找到源代码，就像 <!--<script src="js/index.js"</script>--> 一样，那么下拉菜单就会起作用。奇怪的是，同一站点上的其他 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，只有一个滚动功能和另一个“悬停”功能，我最终可能会转移到 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

这在大多数情况下是由于多次加载引导 js 库