Twitter Bootstrap下拉菜单不起作用

Question

我知道堆栈溢出有很多像这样的问题，我看过他们，但我的下拉菜单仍然无法正常工作。

这里是我的代码：

<div class="navbar navbar-inverse navbar-fixed-top"> 
       <div class="navbar-inner"> 
         <div class="container"> 
<ul class="nav pull-left"> 
<li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a></li> 
<li class="dropdown" id="accountmenu"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Login</a></li> 
          <li><a href="#">Register</a></li> 
         </ul> 
        </li> 
         </div> 
       </div> 
</div> 

这有什么错呢？

编辑

所以下拉菜单现在张贴到这个问题的答案的工作。但是，如果我包含在那里提到的脚本，模式窗口停止工作。当我评论这些条目时，它会重新开始工作。

下面是我的模态窗口中的代码：

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
    aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
      X</button> 
     <h3 id="myModalLabel"> 
      Enter your Credentials</h3> 
    </div> 
    <div class="modal-body"> 
     <form class="form-horizontal"> 
    <div class="control-group"> 
    <label class="control-label" for="inputEmail">Email</label> 
    <div class="controls"> 
    <input type="email" id="inputEmail" placeholder="Email"> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label" for="inputPassword">Password</label> 
</div> 
    </div> 
    <div class="control-group"> 
    <div class="controls"> 
    <label class="checkbox"> 
    <input type="checkbox"> Remember me 
    </label> 
    <a href="news.php" class="btn btn-primary">Login</a> 
    <a href="registration.php" class="btn btn-primary">Sign up</a> 
    </div> 
    </div> 
    </form> 
    </div> 
</div> 

和JavaScript的触发器：

$('#myModal').on('hide',function(){ 
    $('.nav > li > a.modal-open-li').removeClass('modal-open-li'); 
}); 

Answer 1

似乎在的jsfiddle做工精细，这里有一个例子http://jsfiddle.net/2hGuv/

你必须记得导入js文件。 这里是以下文件中的代码输入： http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <ul class="nav pull-left"> 
       <li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a> 

       </li> 
       <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a> 

        <ul class="dropdown-menu"> 
         <li><a href="#">Login</a> 

         </li> 
         <li><a href="#">Register</a> 

         </li> 
        </ul> 
       </li> 
     </div> 
    </div> 
</div> 

Answer 2

检查，如果你有这样的js文件：$('.dropdown-toggle').dropdown();

检查，如果你有这样的事情与此序列：

<script src="jquery.js"></script> 
<script src="bootstrap.js"></script> 
<script type="text/javascript"> $(document).ready(function() { $('.dropdown-toggle').dropdown(); }); </script> 

选中此项：Bootstrap drop-down menus and tabbable tabs on Docpad

Answer 3

在我准备功能添加这个固定的问题，我

$('.dropdown-toggle').dropdown(); 

Answer 4

对于任何的问题仍未解决。我发现我是包括两次引导js文件（我分裂了我的头，身体和页脚文件，并没有意识到，我包括他们俩在页脚和页眉。

可能会帮助别人。

Answer 5

我也有类似的问题。 而原因是在头标签js文件错误的顺序。 正确的顺序是jquery.min.js第一比bootstrap.min.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

Answer 6

因为我的这是因为添加脚本的顺序不对，应该是这样的：

<script src="Scripts/jquery-1.9.1.min.js"></script> 
<script src="Scripts/bootstrap.min.js"></script> 

Answer 7

在我的情况下，问题是与jQuery版本。 在bootstrap.js v3.3.6

if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) { 
    throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3') 
    } 

注：“引导\的JavaScript的需要jQuery的1.9版本。1或更高，但低于版本3'

我用jQuery-1.11.3.js替换了本地jQuery文件的代码，它开始工作。

希望它能为你工作。

Answer 8

在我的情况下，在我的下拉按钮上有一个组件，我记下它花了太长时间。 Noob错误，但它可能有助于某人。