带有 Twitter Bootstrap 的下拉菜单

发布于 2025-01-06 12:10:12 字数 2674 浏览 2 评论 0原文

继这个问题之后，我仍在努力解决推特引导程序。我已经设法让我的导航栏出现，并且我正在尝试向其添加一个下拉菜单。无论我如何尝试，我实际上都无法使菜单的下拉部分正常工作！这是我的菜单的屏幕截图。

navigation bar

如您所见，我有“帐户设置”，它应该是一个下拉菜单，但是当我单击它时，不出现下拉选项。下面是我的代码：

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

如您所见，我引用了 Twitter 中的下拉 Javascript 文件。我也尝试过在本地引用它，但没有什么区别。我还包含了 Javascript，我相信它应该连接下拉菜单并调用 Twitter 的 Javascript 文件。

我不知道为什么这不起作用

原文

Following on from this question, I am still struggling with the 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.

navigation bar

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

I'm at a loss as to why this isn't working

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

五里雾 2025-01-13 12:10:12

我看不出您在代码中的何处包含 jQuery。您必须将其包含在所有其他脚本之前，下拉列表才能正常工作。

这是来自 google CDN 的 jQuery 脚本：

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

I can't see where you are including jQuery in your code. You have to include it before all your other scripts for the dropdown to work.

Here is the jQuery script from the google CDN:

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

回复收藏 0 原文

风启觞 2025-01-13 12:10:12

请注意，在您的示例中使用此代码也是多余的：

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

因为它没有执行任何操作。

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.

回复收藏 0 原文

~没有更多了~