Jquery 引导3：仅当固定导航栏位于顶部位置时，下拉菜单不起作用

无论什么原因，当在页面顶部，我的固定导航栏的下拉菜单链接被禁用，我没有办法点击它们。但是，只要我滚动，导航栏固定到顶部，它们就可以再次单击

下面是一个关于Bootply的示例：

它在Bootply上似乎工作得很好，但在我的rails服务器上却不工作

以下是html：

<nav class="navbar navbar-default navbar-fixed-top navdoc" id="nav-doc" data-spy="affix">
<div class='container'>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav nav-justified" align='center'>
      <li>
        <a href="#create" class='doclink' style="display:inline-block;padding-right:0px;"><img src="/images/create-icon.jpg" class='icon' >Create an Idea</a>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
          <ul class="dropdown-menu pull-right">
            <li><a href="#createnewidea">Create a New Idea</a></li>
            <li><a href="#directidea">Direct an Existing Idea</a></li>
            <li><a href="#defineidea">Define an Existing Idea</a></li>
            <li><a href="#measuringcont">Measuring Contributions</a></li>
            <li><a href="#transitioncreatebuild">Transition from Create to Build</a></li>
          </ul>
      </li>
      <li>
        <a href="#build" class='doclink' style="display:inline-block;padding-right:0px;"><img src="/images/build-icon.jpg" class='icon'>Build an Idea</a>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
          <ul class="dropdown-menu pull-right">
            <li><a href="#partsandequity">Parts and Equity</a></li>
            <li><a href="#ideadescription">Idea Description</a></li>
            <li><a href="#summaryofbusiness">Summary of Business</a></li>
            <li><a href="#summaryofproduct">Summary of Product</a></li>
            <li><a href="#marketingstrategyplan">Marketing Strategy Plan</a></li>
            <li><a href="#marketanalysis">Market Analysis</a></li>
            <li><a href="#marketingstrategyimplementation">Marketing Strategy Implementation</a></li>                
            <li><a href="#executivesummary">Executive Summary</a></li>
            <li><a href="#logo">Logo</a></li>
            <li><a href="#wireframes">Wireframes</a></li>   
            <li><a href="#mockups">Mock-Ups</a></li>    
            <li><a href="#flowchartandschema">Flowchart & Schema</a></li> 
            <li><a href="#prototype">Prototype</a></li> 
            <li><a href="#startpart">Starting a Part</a></li>    
            <li><a href="#unstartpart">Unstarting a Part</a></li>   
            <li><a href="#finishpart">Finishing a Part & Assessment of Contribution Quality</a></li> 
            <li><a href="#measuringcontrbuild">Measuring Contributions</a></li>
            <li><a href="#transitionbuildbuy">Transition from Build to Buy</a></li>         
          </ul>
      </li>
      <li> 
          <a href="#buy" class='doclink' style="display:inline-block;padding-right:0px;"><img src="/images/buy-icon.jpg" class='icon'>Buy an Idea</a>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
          <ul class="dropdown-menu pull-right">
            <li><a href="#infoforinvestors">Information Available to Investors</a></li>
            <li><a href="#actionspossiblebuy">Actions Possible</a></li>
            <li><a href="#whathappensnext">What Happens Next?</a></li>
          </ul>
      </li>
    </ul>
  </div><!--/.nav-collapse -->

还有Javascript：

$(document).ready(function($) {
    $('#nav-doc').affix({
        offset: {
            top: 50
        }
    });
})

我真的一辈子都搞不清楚到底出了什么问题。我的application.js中也有正确顺序的所需文件

谢谢你的帮助

编辑：以下是我屏幕上发生的事情的图像：

有人知道为什么会这样吗？当我加上http://postimg.org/image/rxp2ezbuj/ 正如我在回答另一个锚定标签时所建议的那样，它只是阻止了它成为一个可用的链接。

您还需要在文本链接中添加数据切换=下拉列表

<li class="">
  <a href="#" class="doclink" data-toggle="dropdown" style="display:inline-block;padding-right:0px;"><img src="/images/create-icon.jpg" class="icon">Create an Idea</a>
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
  <ul class="dropdown-menu pull-right">
    <li><a href="#createnewidea">Create a New Idea</a></li>
    <!-- the rest of your list items -->
  </ul>
</li>

---

我仍然有一个问题，当在页面顶部时，其他下拉项都不可点击。谢谢你的帮助。

<li class="">
  <a href="#" class="doclink" data-toggle="dropdown" style="display:inline-block;padding-right:0px;"><img src="/images/create-icon.jpg" class="icon">Create an Idea</a>
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="display:inline-block;padding-left:0px;"><b class="caret"></b></a>
  <ul class="dropdown-menu pull-right">
    <li><a href="#createnewidea">Create a New Idea</a></li>
    <!-- the rest of your list items -->
  </ul>
</li>