0

我在使 twitter bootstrap 中的下拉菜单正常工作时遇到了一些麻烦。这是我的导航栏代码。

<div class="container-fluid">
<div class="row-fluid">
    <div class="span12">
        <div class="navbar">
            <div class="navbar-inner">
                    <ul class="nav">
                        <a class="brand">Title of website</a>
                        <li class="divider-vertical"></li>
                            <li class="active"><a href="index.html">Home</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Sub-Link 1</a></li>
                                    <li><a href="#">Sub-Link 2</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Sub-Link 1</a></li>
                                    <li><a href="#">Sub-Link 2</a></li>
                                </ul>
                            </li>
                    </ul>
            </div>
        </div>
    </div>
</div>

我已经看过许多不同的教程/示例，我不确定我做错了什么，我在文档末尾包含了 jquery 和 bootstrap-dropdown.js 文件。

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

对此问题的任何帮助将不胜感激。

提前致谢，

4

4 回答 4

0

尝试这个

//use bootstrap css
//latest jquery
//add bootstrap.js
//and paste your html
 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
    <style>
        .box
        {
            border: 1px solid red;
            height: 100%;
        }
    </style>
    <script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script src="Scripts/bootstrap.js" type="text/javascript"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="navbar">
                    <div class="navbar-inner">
                        <ul class="nav">
                            <a class="brand">Title of website</a>
                            <li class="divider-vertical"></li>
                            <li class="active"><a href="index.html">Home</a></li>
                            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 1<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Sub-Link 1</a></li>
                                    <li><a href="#">Sub-Link 2</a></li>
                                </ul>
                            </li>
                            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Link 2<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Sub-Link 1</a></li>
                                    <li><a href="#">Sub-Link 2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>
于 2013-06-14T11:41:00.273 回答
0

我刚刚测试了代码，它应该可以工作。使用您的代码查看此演示

一个小更新。该.brand元素应该是 navbar 的子元素，而不是 navbar 的子元素ul，因为这是无效的：

 <div class="navbar">
    <a class="brand">Title of website</a>
       <div class="navbar-inner">
           <ul class="nav">
               <li class="divider-vertical"></li>

您不必打电话$('.dropdown-toggle').dropdown();- 正如您可以看到上面的演示

于 2013-06-14T11:44:22.447 回答
0

您的代码似乎可以运行。

看看这个例子：http: //jsfiddle.net/vZQ7S/

您可以尝试检查开发人员控制台是否有任何错误消息。

也许您没有将 javascript 库链接到正确的文件路径？

也尝试运行

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

在开发人员控制台中并注意错误消息。

于 2013-06-14T11:56:15.797 回答
0

我在您的代码中没有发现任何错误，好像您是

missing or not being loaded bootstrap-dropdown.js file

moreover please add bootstrap.js core file (as added in jsfiddle in below link)

检查这个jsfiddle，http://jsfiddle.net/mastermindw/kbzxV/

于 2013-06-14T11:40:07.500 回答