Javascript Twitter引导下拉列表不工作_Javascript_Twitter Bootstrap

Javascript Twitter引导下拉列表不工作

javascript twitter-bootstrap

Javascript Twitter引导下拉列表不工作,javascript,twitter-bootstrap,Javascript,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-t

你知道为什么这个推特引导下拉列表不起作用吗

头中的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>

将下拉类放在包装

li

的div上，而不是放在

li

本身上。像这样

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

...

这个例子来自

您的代码应该如下所示

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

我试着制作一个嵌套列表，但它在引导中不起作用。我想这会把两个下拉列表搞混。

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

这很容易解决。包装代码的元素是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”添加到类列表中，如下所示：

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

我的标题部分如下所示：

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

我试过了，看起来很糟糕。而且它不起作用。检查他们的网站，他们不是这样做的。看这里：我直接从他们的网站复制并粘贴了我的示例。我不明白你的意思。我们需要一个你的网站的例子，以帮助进一步。这是我发现的第一个代码，实际工作。谢谢。对我来说这很重要-bootstrap.js和bootstrap.min.js都在一个文件中包含所有插件。我包括bootstrap-dropdown.js，但它不起作用：）如果下拉菜单是导航栏的一部分，twitter本身建议将该类放在列表项中。检查“在导航栏内”部分中导航栏上的元素，您的js以什么顺序加载？jQuery总是第一位的，bootstrap是第二位的。如果你有bootstrap.js（不是bootstrap.min.js），你就不应该添加bootstrap-dropdown.js。对我来说，这就是诀窍。尝试添加到dom就绪：$（'.dropdown toggle'）.dropdown（）；您不需要将其绑定到document ready函数。它在没有任何JavaScript的情况下工作。