Question

美好的一天！我正在尝试从我的网站上的示例实现下拉菜单。但它不起作用（下拉菜单根本没有显示）。我包含了所有必要的js和css文件，标记与文档中的相同。

你能看出我做错了吗？

<link type="text/css" href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">

<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-dropdown.js"></script>

...

<body>
<div class="navbar .navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">
                Brand
            </a>

            <ul class="nav">
                <li class="dropdown">
                    <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
                        Аккаунт
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" id="fat-menu">
                        <li><a>SubLink</a></li>
                        <li class="divider"></li>
                        <li><a>SubLink</a></li>
                    </ul>
                </li>
            </ul>

...


        </div>
    </div>
</div>

非常感谢。

Answer 1

问题在于缺少html文件中的js块，这是特定功能所必需的。

缺少的代码位是：

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

Answer 2

您未将主导航链接正确绑定到下拉列表，请尝试以下操作：

<ul class="nav">
    <li class="dropdown" id="fat-menu"> /* notice the reference to your dropdown link #fat-menu */
        <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
            Аккаунт
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a>SubLink</a></li>
            <li class="divider"></li>
            <li><a>SubLink</a></li>
        </ul>
    </li>
</ul>

演示：http://jsfiddle.net/u5vhS/1/

Answer 3

我以前常常忘记其中一个：

正确的html
链接到jquery.js和bootstrap-dropdown.js
检查我是否正确连接（似乎多余，但它确实帮助了我）
调用下拉列表：$（'。dropdown-toggle'）。dropdown（）

Answer 4

我知道这看起来很愚蠢，但是当您查看源代码（通过右键单击）时，JavaScript文件的地址是否正确？ {{STATIC_URL}}可能不正确。尝试将源中的地址复制并粘贴到地址栏中。确保您确实看到了JavaScript文件的内容。

Answer 5

我遇到了同样的问题。评论bootstrap-dropdown.js的链接解决了它。我只需要bootstrap.min.js

Answer 6

如果你在css的某个地方覆盖li，就会发生这种情况。例如，如果您有另一个包含内容的样式表：

li {
    list-style: none;
    margin-bottom: 20px;
    overflow: hidden;
    padding-bottom: 25px;
    position: relative;
}

它无效。确保没有冲突。

Answer 7

尝试升级你的jQuery库，它为我解决了同样的问题。

Answer 8

在.net项目中存在相同的问题（下拉菜单根本没有显示），但是官方的bootstrap样本工作正常。将我的项目中的jQuery库从1.6.1升级到1.8.2解决了这个问题。

Twitter Bootstrap 2下拉菜单不起作用

8 个答案: