8

任何想法为什么这个 Twitter Bootstrap 下拉菜单不起作用？

头部的Javascript：

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

3 回答 3

7

将下拉类放在包装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>

我尝试制作一个嵌套列表，但它不适用于引导程序。我认为这会使两个下拉菜单混淆。

于 2012-09-21T17:46:18.307 回答
2

这很容易解决。包装代码的元素是 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。

于 2013-06-17T14:15:34.660 回答
2

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

于 2013-05-11T13:04:17.707 回答