使用Twitter Bootstrap下拉菜单

Question

Following on from this question , I am still struggling with the Twitter Bootstrap. 继这个问题之后，我仍在努力使用Twitter Bootstrap。 I've managed to get my navigation bar to appear and I'm trying to add a drop down menu to it. 我设法让我的导航栏出现，我正在尝试添加一个下拉菜单。 No matter what I try, I can't actually get the drop down part of the menu to work! 无论我尝试什么，我实际上无法让菜单的下拉部分工作！ Here is a screenshot of my menu. 这是我的菜单截图。

导航栏

As you can see, I have "Account Settings" which should be a drop down menu but when I click on it, no drop down options appear. 正如您所看到的，我有“帐户设置”，它应该是一个下拉菜单，但是当我点击它时，不会出现下拉选项。 Below is my code: 以下是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>

    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap.js")" type="text/javascript"></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>

    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">Present Ideas</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Help</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Login</a></li>
                            <li><a href="#">Register</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Logout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        @RenderBody()
    </div>
</body>
</html>

As you can see, I'm referencing the dropdown Javascript file from Twitter. 如您所见，我正在引用Twitter中的下拉Javascript文件。 I have also tried referencing this locally which made no difference. 我也试过在本地引用这个没有区别。 I've also included the Javascript that I believe should hook-up the drop down menu and call into Twitter's Javascript file. 我还包括了我认为应该连接下拉菜单并调用Twitter的Javascript文件的Javascript。

I'm at a loss as to why this isn't working 我不知道为什么这不起作用

Answer 1

I can't see where you are including jQuery in your code. 我无法在你的代码中看到你在哪里包含jQuery。 You have to include it before all your other scripts for the dropdown to work. 您必须在所有其他脚本之前包含它才能使下拉列表生效。

Here is the jQuery script from the google CDN: 这是来自谷歌CDN的jQuery脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Answer 2

Mind it is also redundant to use this code in your example: 请注意，在您的示例中使用此代码也是多余的：

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

Because it isn't doing anything. 因为它没有做任何事情。

使用Twitter Bootstrap下拉菜单

问题描述

2 个解决方案

解决方案1
12 已采纳 2012-02-17 19:20:44

解决方案2
5 2012-04-24 10:12:16

使用Twitter Bootstrap下拉菜单

问题描述

2 个解决方案

解决方案1 12 已采纳 2012-02-17 19:20:44

解决方案2 5 2012-04-24 10:12:16

解决方案1
12 已采纳 2012-02-17 19:20:44

解决方案2
5 2012-04-24 10:12:16