Question

您好我只想问我哪里错了。我有使用twitter bootstrap的下拉按钮，但我无法解决它。请看我的代码。我只是在twitter bootstrap中的新手。我也尝试在bootstrap网站上搜索它，但我无法解决它。

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="../../assets/js/bootstrap-dropdown.js"></script>
    <script type="text/javascript" src="../../assets/js/bootstrap-min.js"></script>

    <link href="../../assets/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
    </script>
</head>
<body>
    <div class="dropdown">
        <ul class="dropdown">
        <a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" 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>
 </body>
 </html>

Answer 1

他们不需要添加dropdown.js，因为你已经添加了bootstrap.min.js

HTML

<div class="dropdown">
    <ul class="dropdown">
    <a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" 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>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../../assets/js/bootstrap-min.js"></script>

JS

$(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });

选中此jsFiddle

Answer 2

您的代码存在很多问题。请查看Bootstrap文档以了解如何实现下拉列表。当您只需要缩小的文件时，您还要加载两个Bootstrap CSS文件。此外，您正在加载旧版本的jQuery。当你真的只需要缩小的Bootstrap JS时，你也在加载dropdown.js。最后，您的HTML格式不正确。 UL的唯一有效子项是LI。我假设您正在使用最新版本的Bootstrap？这是下拉列表文档的链接：getbootstrap.com/javascript/#dropdowns -

下拉列表不起作用（Twitter引导程序）

2 个答案: