jquery - Bootstrap 3 : dropdown not working only when fixed navbar is on top position

Question

无论出于何种原因，当我在页面顶部固定导航栏的下拉菜单链接时被禁用，我无法点击它们。但是，一旦我滚动并且导航栏固定在顶部，它们就可以再次点击了。

这是一个关于 Bootply 的例子:http://www.bootply.com/bfgbVfbK9g

它似乎在 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 -->

还有CSS:

html,
body {
  height: 100%;
  /* The html and body elements cannot have any padding or margin. */
  -webkit-font-smoothing: antialiased;
}

.row {
  margin-left:0px;
  margin-right:0px;
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}


/* Custom page CSS
-------------------------------------------------- */

#wrap > .container {
  padding: 60px 15px 0;
}
.container .credit {
  margin: 20px 0;
}

h1,h2,h3,h4 {
  vertical-align:middle;
}

header {
  background: #f16251;
  height:550px;
  color:#000000;
}

header h1,header h2,header h3 a,header a,header a:hover {
  color:#101010;
}

header h3 {
  background: #ffcc33;
  padding:10px;
  border-radius:3px;
  padding:12px 10px 6px 10px;
}

header .dropdown-menu {
  top:74px;
  background: #ffcc33;
  border-width:0;
}

#nav-doc {
  width: 100%;
  position:static;
  top:-32px;
  background-color: #fff;
  opacity:0.95;
  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

#nav-doc.affix {
   position: fixed;
   top: 0;
   z-index:10000;
}

#footer > .container {

}

@media (min-width: 767px) {
  .navbar-nav.nav-justified > li{
      float:none;
  }
}
.navbar-nav {
  margin: 1px 1px; 
}  

.navbar-collapse.in { /*3.0.2 bug workaround*/
    overflow-y: visible;
}

.navbar-toggle {
  outline:0;
}

.divider {
  height:100px;
}

.panel {
  border-width:0;
}

.scroll-top {
   position:fixed;
   bottom:0;
   right:6%;
   z-index:100;
   background: #bdc3c7;
   color: #333333;
   font-size:24px;
   border-top-left-radius:3px;
   border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
  color:#222;
} 


section {
  color: #ffffff;
  min-height: 400px;
  height: auto !important;
  height: 100%;
  padding-top:100px;
}

.doc {
  text-align: justify;
  text-justify: inter-word;
}


.nav .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.nav a:hover .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus .doclink {
  background-color:transparent;
}

.anchor {
  display: block; 
  position: relative; 
  top: -100px; 
  visibility: hidden;
}

和 Javascript:

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

我真的一辈子都弄不明白哪里出了问题。我的 application.js 中也有按正确顺序排列的所需文件。

感谢您的帮助。

编辑:这是我屏幕上发生的事情的图像:

enter link description here

有人知道为什么会这样吗？当我按照对我的其他 anchor 标记的回答中的建议添加 http://postimg.org/image/rxp2ezbuj/ 时，它只是阻止了它成为可用链接。

Answer 1

您还需要将 data-toggle="dropdown" 添加到文本链接中。

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