使用Twitter Bootstrap（JS和Jquery）的下拉菜单不会下拉-怎么了？

Question

I'm a complete newbie to website development, so I'm following patterns given by other developers. 我是网站开发的新手，因此我遵循其他开发人员提供的模式。 I'm following this site tutorial on how to add in a dropdown menu. 我正在关注有关如何在下拉菜单中添加内容的本网站教程。

I found one question on stack overflow of another person following this tutorial. 我在遵循本教程后发现了另一个人的堆栈溢出问题。 I've lost the link and despite looking through my history, I haven't been able to find it. 我丢失了链接，尽管浏览了我的历史记录，但仍找不到它。 Someone suggested that the tutorial was build using bootstrap's version 1, and to refer back to bootstrap site for more information. 有人建议该教程是使用Bootstrap的版本1构建的，并请参考Bootstrap网站以获取更多信息。 I did (my current version reflects using bootstrap's guide), but I wasn't able to glean any insight into why my code won't work. 我做到了（我的当前版本反映了使用引导程序的指南），但是我无法从任何角度了解为什么我的代码无法正常工作。

After sifting through the bootstrap resources and similar stack overflow questions like 筛选引导资源和类似的堆栈溢出问题后，例如

Dropdown menu with Twitter Bootstrap 带有Twitter Bootstrap的下拉菜单

Twitter Bootstrap dropdown menu Twitter Bootstrap下拉菜单

Twitter Bootstrap 2 drop down menu is not work Twitter Bootstrap 2下拉菜单不起作用

All seem to stress the importance of importing the jquery before bootstrap, so I've done this, but it doesn't seem to solve my problem. 所有人似乎都强调了在引导程序之前导入jquery的重要性，因此我已经做到了，但这似乎并不能解决我的问题。 Here is what shows: http://imgur.com/UtYlUXG 这是显示的内容： http : //imgur.com/UtYlUXG

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>KTown Car Share</title>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="http://flip.hr/css/bootstrap.min.css"> </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 rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
    <style type="text/css">
    body{
        padding-top: 60px;
        padding-bottom: 40px;
    }
    </style>
    <link rel="stylesheet" href="css/bootstrap-responsive.css">
    <link rel="stylesheet" href="css/style.css"> 
</head>


<body>
    <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    Item1
                    </ul>
                </li>
            </ul>
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

Any help would be most appreciated! 非常感激任何的帮助！ I'm out of ideas on what to try. 我对尝试什么一无所知。

Answer 1

I copy pasted your html and javascript into a jsfiddle and its working http://jsfiddle.net/daJT7/3/ 我将粘贴的html和javascript复制到jsfiddle及其工作的http://jsfiddle.net/daJT7/3/

Portion I copied: 我复制的部分：

$(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });


<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account <b class="caret"></b></a>
                <ul class="dropdown-menu">
                Item1
                </ul>
            </li>
        </ul>
        <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
</div>

So I think it must have something to do with your references. 因此，我认为这一定与您的参考有关。 One thing I did notice was that 我注意到的一件事是

<script src="http://flip.hr/css/bootstrap.min.css"> </script>

Is invalid (script is for scripts, and you are already importing the bootstrap css on a different line). 无效（脚本用于脚本，并且您已经在另一行上导入了引导css）。 Remove this. 删除它。 This might or might not be causing problems. 这可能会或可能不会引起问题。

As a side note. 作为旁注。 I wouldn't directly link to the twitter bootstrap github or someone else's website (unless flip.hr is your website :)). 我不会直接链接到twitter bootstrap github或其他人的网站（除非flip.hr是您的网站:)）。
Try using a CDN instead (eg http://www.bootstrapcdn.com/ ) 尝试改用CDN（例如http://www.bootstrapcdn.com/ ）

使用Twitter Bootstrap（JS和Jquery）的下拉菜单不会下拉-怎么了？

问题描述

1 个解决方案

解决方案1
3 已采纳 2013-03-16 23:40:46

使用Twitter Bootstrap（JS和Jquery）的下拉菜单不会下拉-怎么了？

问题描述

1 个解决方案

解决方案1 3 已采纳 2013-03-16 23:40:46

解决方案1
3 已采纳 2013-03-16 23:40:46