Question

我有一个网站，每个页面都使用一个bootstrap切换/折叠导航栏。除了一个之外，所有页面都可以正常工作。出于某种原因，其中一个页面导航栏会折叠一次到适当的屏幕大小，但它不会下拉。但是，我注意到，如果我注释掉一个JS文件，我来源于html的底部，就像一样，那么下拉工作就可以了。有点奇怪的是，同一网站上的其他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

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

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

1 个答案: