Twitter Bootstrap下拉列表無法正常工作

Question

任何想法為什么這個Twitter Bootstrap下拉列表不起作用？

Javascript in head：

<script src="/assets/js/bootstrap.js" type="text/javascript"></script>

菜單HTML：

             <li class="dropdown">
                <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
                  <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="/app/1">Item A</a></li>
                  <li><a href="/app/2">Item B</a></li>
                  <li><a href="/app/3">Item C</a></li>
                </ul>
              </li>

Answer 1

將下拉類放在包裹li而不是li本身的div上。 像這樣...

        <div class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
         ...
        </ul>
        </div>

該示例來自引導站點

你的代碼應該是這樣的......

    <!DOCTYPE html >
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="../plugins/js/bootstrap-dropdown.js"></script>
    <link href="../theme/bootstrap.css" rel=stylesheet type="text/css">

    </head>
    <div class="dropdown">
        <ul class="dropdown">
        <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
          <b class="caret"></b>
        </a>
            <ul class="dropdown-menu">
              <li><a href="/app/1">Item A</a></li>
              <li><a href="/app/2">Item B</a></li>
              <li><a href="/app/3">Item C</a></li>
            </ul>
        </ul>
    </div>

我嘗試制作一個嵌套列表，但它不適用於bootstrap。 我認為它讓兩個下拉混亂。

Answer 2

確保您使用的是最新版本的JQuery

Answer 3

這很容易解決。 包裝代碼的元素是li，但它必須是div。 這對我有用：

<div class="dropdown">
  <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="/app/1">Item A</a></li>
    <li><a href="/app/2">Item B</a></li>
    <li><a href="/app/3">Item C</a></li>
  </ul>
</div>

在此輸入圖像描述

如果你想讓它看起來像一個按鈕，只需將“btn”添加到類列表中，如下所示：

<a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" href="#">

我的標題部分如下所示：

<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap-responsive.min.css'>
<script src='js/jquery-2.0.0.min.js' type='text/javascript'>
<script src='js/bootstrap.min.js' type='text/javascript'>

如果您沒有為移動設備做任何事情，您可能想要忽略響應式CSS。

Twitter Bootstrap下拉列表無法正常工作

問題描述

3 個解決方案

解決方案1
7 2012-09-21 17:46:18

解決方案2
2 2013-05-11 13:04:17

解決方案3
2 2013-06-17 14:15:34

Twitter Bootstrap下拉列表無法正常工作

問題描述

3 個解決方案

解決方案1 7 2012-09-21 17:46:18

解決方案2 2 2013-05-11 13:04:17

解決方案3 2 2013-06-17 14:15:34

解決方案1
7 2012-09-21 17:46:18

解決方案2
2 2013-05-11 13:04:17

解決方案3
2 2013-06-17 14:15:34