twitter bootstrap下拉菜單javascript

Question

我在使Twitter引導程序中的下拉菜單工作時遇到一些麻煩。 這是我的導航欄代碼。

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

在此問題上的任何幫助將不勝感激。

提前致謝，

Answer 1

我在您的代碼中找不到任何錯誤，好像您是

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/

Answer 2

嘗試這個

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

Answer 3

我剛剛測試了代碼，它應該可以工作。 看到這個演示與您的代碼

一個小更新。 .brand元素應該是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(); -如上圖所示

Answer 4

您的代碼似乎正在運行。

看看這個例子： http : //jsfiddle.net/vZQ7S/

您可以嘗試檢查開發人員控制台中是否有任何錯誤消息。

也許您沒有將javascript庫鏈接到正確的文件路徑？

也嘗試運行

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

在開發人員控制台中，觀察錯誤消息。

twitter bootstrap下拉菜單javascript

問題描述

4 個解決方案

解決方案1
0 2013-06-14 11:40:07

解決方案2
0 2013-06-14 11:41:00

解決方案3
0 2013-06-14 11:44:22

解決方案4
0 2013-06-14 11:56:15

twitter bootstrap下拉菜單javascript

問題描述

4 個解決方案

解決方案1 0 2013-06-14 11:40:07

解決方案2 0 2013-06-14 11:41:00

解決方案3 0 2013-06-14 11:44:22

解決方案4 0 2013-06-14 11:56:15

解決方案1
0 2013-06-14 11:40:07

解決方案2
0 2013-06-14 11:41:00

解決方案3
0 2013-06-14 11:44:22

解決方案4
0 2013-06-14 11:56:15