0

我正在将 Bootstrap 3 用于我正在构建的单页网站。我有一些我似乎无法克服的问题。

链接到页面

卷轴间谍：

第一个问题是关于 Scrollspy。我已经实现了这一点，但我想在向上滚动经过最顶部的锚点时取消绑定 scrollspy。目前导航中有三个项目，最上面的一个是“工作”。在网站上向上滚动超出此区域时，我想取消绑定“间谍”。我想出了一个想法，在导航中添加一个额外的项目（使用等效的锚点），然后将其定位在页面之外，但这感觉有点脏！

手机上的折叠菜单：

我遇到的另外两个问题与移动设备上的折叠菜单有关（在 iPhone 4 上测试）。

第一个很简单，当导航打开时，然后点击菜单切换（再次关闭它）折叠的菜单会奇怪地闪烁，它不仅仅是动画回来（就像在网络上那样）。

第二个问题是我希望在点击其中一个菜单项时导航消失。我目前正在使用以下代码，但它似乎会导致页面的一些疯狂滚动（再次在移动设备上）：

$('.nav li a').on('click',function(){
    $('.navbar-collapse').collapse('toggle');
})

任何帮助是极大的赞赏！

4

2 回答 2

0

要在导航打开时摆脱闪烁，您可能需要尝试以下操作：

    $('.nav li a').on('click',function(){
        $('.navbar-collapse').collapse('toggle');
        return false;
    })
于 2013-09-12T16:59:54.667 回答
0

我会从非常接近原始模板开始。下面的代码取自原始模板并稍作修改......所以至少菜单切换应该在没有任何额外自定义 js 的情况下工作。hth

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
    <!-- main-logo -->
    <h1><img src="img/alfie-logo-sml.png" class="img-responsive  jumbotron--logo"/></h1>

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
         <li class="brand-font"><a href="#work">Work</a></li>
         <li class="brand-font"><a href="#team">Team</a></li>
         <li class="brand-font"><a href="#contact">Contact</a></li>
      </ul>

  </div><!-- /navbar-collapse -->

</div>

于 2013-09-13T16:46:16.290 回答