11

我知道 Stack Overflow 上有很多这样的问题，我已经看过了，但我的下拉菜单仍然无法正常工作。

这是我的代码：

<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');
});
4

8 回答 8

19

对于仍然遇到此问题的任何人。我发现我包含了两次引导 js 文件（我已经拆分了我的页眉、正文和页脚文件，但没有意识到我将它们都包含在页脚和页眉中。

可能会帮助某人。

于 2013-10-30T22:48:53.110 回答
17

我有一个类似的问题。原因是head标签中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>
于 2014-01-16T22:00:10.973 回答
11

检查您是否在 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 下拉菜单和 Docpad 上的可选项卡

于 2013-09-22T17:13:33.553 回答
11

在我准备好的函数中添加它为我解决了这个问题

$('.dropdown-toggle').dropdown();
于 2013-09-26T11:28:01.780 回答
9

似乎在 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>
于 2013-09-22T16:20:02.883 回答
2

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

<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
于 2015-10-03T11:54:43.533 回答
0

就我而言，问题出在 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')
  }

注意：'Bootstrap\'s JavaScript 需要 jQuery 版本 1.9.1 或更高，但低于版本 3'

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

希望它也对你有用。

于 2016-06-18T03:27:50.327 回答
-1

就我而言，我的下拉按钮上有一个组件，我花了很长时间才注意到。菜鸟错误，但它可能对某人有所帮助。

于 2016-08-29T14:09:38.950 回答