Question

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

Scrollspy：

第一个问题是关于Scrollspy。我已经实现了这个，但是我想要在向上滚过最顶端的锚点时取消绑定卷轴。导航中目前有三个项目，其中最重要的是＆＃34; work＆＃34;。当我在网站上向上滚动这个区域时，我想解开＆＃34;间谍＆＃34;。我提出了一个想法，即在导航中添加一个额外的项目（使用等效锚点），然后将其放在页面上，但这感觉有点脏！

移动设备上的折叠菜单：

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

第一个是简单的，当导航打开时，然后点击菜单切换（再次关闭它），折叠的菜单做了一个奇怪的闪光，它不仅仅是动画回来（就像它一样）幅）。

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

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

非常感谢任何帮助！

Answer 1

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

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

Answer 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>

各种Bootstrap菜单问题

2 个答案: