各种引导菜单问题答案

【问题标题】：Various Bootstrap Menu Issues各种引导菜单问题
【发布时间】：2013-09-12 16:27:55
【问题描述】：

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

Scrollspy：

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

移动设备上的折叠菜单：

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

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

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

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

非常感谢任何帮助！

【问题讨论】：

标签： jquery twitter-bootstrap mobile nav scrollspy

【解决方案1】：

要消除导航打开时的闪烁，您可能需要尝试以下操作：

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

【讨论】：

【解决方案2】：

我会从非常接近原始模板开始。下面的代码取自原始模板并稍作修改......所以至少菜单切换应该在没有任何额外的自定义 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>

【讨论】：