javascript - bootstrap autoHideNavbar 导致 TypeError : undefined is not a function

Question

遇到一个奇怪的问题，有一个我试图隐藏的直(足够)导航栏，但是当我调用 autoHidingNavbar 时，只要我调用两个命令(或其中一个)，我就会收到以下错误。

<script>
    $('.navbar-fixed-top').autoHidingNavbar('setAnimationDuration',300);
    //$('.navbar-fixed-top').autoHidingNavbar('hide');
</script>

错误:

TypeError: undefined is not a function

    at eval (eval at <anonymous> (http://127.0.0.1:30016/bower_components/jquery/dist/jquery.min.js:2:2538), <anonymous>:2:28)
    at eval (native)
    at Function.n.extend.globalEval (http://127.0.0.1:30016/bower_components/jquery/dist/jquery.min.js:2:2538)
    at n.fn.extend.domManip (http://127.0.0.1:30016/bower_components/jquery/dist/jquery.min.js:3:17228)
    at n.fn.extend.append (http://127.0.0.1:30016/bower_components/jquery/dist/jquery.min.js:3:14886)
    at null.<anonymous> (http://127.0.0.1:30016/bower_components/jquery/dist/jquery.min.js:3:16246)
    at n.access (http://127.0.0.1:30016/bower_components/jquery/dist/jquery.min.js:2:30124)
    at n.fn.extend.html (http://127.0.0.1:30016/bower_components/jquery/dist/jquery.min.js:3:15917)
    at link (http://127.0.0.1:30016/bower_components/angular-route/angular-route.js:969:16)
    at invokeLinkFn (http://127.0.0.1:30016/bower_components/angular/angular.js:8258:9) <div ng-view="" class="ng-scope">

我发现一些迹象表明早期版本的 bootstrap 或 jquery 可能会导致此问题，或者它们的加载顺序。那么至于顺序，一切都OK:

<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src='/bower_components/angular/angular.js'></script>
<script type="text/javascript" src='/bower_components/angular-route/angular-route.js'></script>
<script type="text/javascript" src='/bower_components/angular-route/angular-route.js'></script>
<script type="text/javascript" src='/bower_components/angular-resource/angular-resource.js'></script>
<script type="text/javascript" src='/bower_components/jquery/dist/jquery.js'></script>
<script type="text/javascript" src='/bower_components/bootstrap/dist/js/bootstrap.min.js'></script>
<script type="text/javascript" src='/javascripts/BabyPadz.js'></script>

菜单部分本身

<footer>
    <div class="navbar navbar-topbaby navbar-fixed-bottom">
        <div class="container text-center">
            <div class="center-block">
                <div class="navbar-header">
                    <a href="/music"><button type="button" class="btn btn-xlarge" ng-style="{'background-color' : bgMusic}">MUSIC</button></a>
                    <a href="config"><button type="button" class="btn btn-xlarge" ngStyle={'background-color' :bgConfig}>CONFIG</button></a>
                    <button type="button" class="btn btn-xlarge" ngStyle={'background-color' :bgLogin}>LOGIN</button>
                    <a href="/about"><button type="button" class="btn btn-xlarge" ngStyle={'background-color' :bgAbout}>ABOUT</button></a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bottom-collapse"> <!-- NOTE! data-target was changed to .bottom-collapse -->
                </div>
            </div>
            <div class="navbar-collapse collapse bottom-collapse"> <!-- NOTE! The extra bottom-collapse class put on here -->
            </div><!--/.nav-collapse -->
        </div>
    </div>
</footer>

更新

经过反馈，我清理了脚本加载

    <script type="text/javascript" src='/bower_components/jquery/dist/jquery.js'></script>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src='/bower_components/angular/angular.js'></script>
<script type="text/javascript" src='/bower_components/angular-route/angular-route.js'></script>
<script type="text/javascript" src='/bower_components/angular-resource/angular-resource.js'></script>
<script type="text/javascript" src='/javascripts/BabyPadz.js'></script>

并将调用更改为

    $('.navbar-fixed-bottom').autoHidingNavbar('setAnimationDuration',300);
    $('.navbar-fixed-bottom').autoHidingNavbar('hide');

可惜没用

更新:

向前迈出一步，不再有错误消息，autoHidingNavbar 是一个 Bootstrap 模块。错过了那个添加

奇怪的是，我现在没有收到错误消息，但栏仍然没有隐藏..

Answer 1

看起来您已经包含了两次 bootstrap.min.js 并且包含了 jquery.js 和 jquery.min.js 。尝试在 Angular 包含后删除这些内容，看看错误是否仍然发生。当您多次包含 Bootstrap 和 jQuery 时，它们都会变得棘手。