【问题标题】:Bootstrap 3.0 navbar-fixed-top toggles only onceBootstrap 3.0 navbar-fixed-top 仅切换一次
【发布时间】:2013-10-02 13:33:52
【问题描述】:

这是我的导航栏代码

    <div class="navbar navbar-fixed-top ">                
            <div class="container">                 
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">                            
                        <span class="icon-bar" style="background-color:red;"></span>
                        <span class="icon-bar" style="background-color:red;"></span>
                        <span class="icon-bar" style="background-color:red;"></span>
                      </button>
                      <a href="#"class="navbar-brand"><img src='img/logo2.png' class="img-responsive"></a> 
                    </div>              
                    <div class="collapse navbar-collapse navbar-ex1-collapse">
                      <ul class="nav navbar-nav navbar-right spy">
                        <li ><a class="fade" href="#section-1">HOME</a></li>
                        <li ><a class="fade" href="#section-2">SHOWREEL</a></li>
                        <li ><a class="fade" href="#section-3">FILMS</a></li>
                        <li ><a class="fade" href="#section-4">PROFILE</a></li>
                        <li ><a class="fade" href="#section-5">CONTACT</a></li>                     
                      </ul>
                    </div>                  
            </div>
        </div>

让我澄清一下,spy 是我用于我的 scrollSpy js 脚本的类名。 这是我在正文末尾包含的 .js 文件:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript">/script>
<script src="js/jquery.nav.js" type="text/javascript"></script>

这是我包含的 .css 文件:

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">           
<link rel="stylesheet" type="text/css" href="css/font.css" />    

正如标题中所说,在小型媒体设备中,切换按钮仅在第一次起作用,之后就没有响应

【问题讨论】:

  • 您的&lt;script&gt; 标签在第三行有一个无效的结束标签。这可能是您问题的根源吗?
  • 不,这是从我的编辑器粘贴时发现的错误。
  • 这听起来像是一个 javascript 错误,控制台上是否显示任何内容?
  • 什么都没有,我将来自 bootstrap.com 的确切导航栏代码插入到我的代码中,它仍然只切换一次。看不懂

标签: jquery css twitter-bootstrap


【解决方案1】:

访问getbootstrap.com。 Bootstrap 3 内置了 scrollspy。你应该通过 javascript 调用 scrollspy:

$('body').scrollspy({ target: '#id-goes-here' })

【讨论】:

  • 所以你建议我使用的 scrollspy js 与导航栏切换功能冲突?
  • 是的,这可能会导致冲突。此外,这听起来像是引导程序可能隐藏并破坏了元素。如果您希望使用您的支持,我会重新安装 bootstrap 减去 scrollspy。
  • 您能否详细说明“重新安装 bootstrap 减去 scrollspy”,因为我无法理解如何在保留当前的 ​​scrollspy 脚本的同时解决这个问题
  • getbootstrap.com/customize - 将是您的最佳选择。你在使用引导程序 3 吗?
  • 是的,而且似乎 bootstrap scrollspy 没有我想要的滑动效果,它只是快速移动到它的目标,我想要滑动 - 慢速效果
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-03-27
  • 2013-11-13
  • 1970-01-01
  • 1970-01-01
  • 2017-10-27
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多