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是一个引导程序的模块。错过了补充

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

Answer 1

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

Answer 2

此错误表示选择器上没有名为autoHidingNavbar()的功能另请注意，您似乎选择了

$('.navbar-fixed-top')

实际上html只包含

navbar-fixed-bottom

类。我不确定这是不是错误。

bootstrap autoHideNavbar导致TypeError：undefined不是函数

2 个答案: