1

我已经查看了 stackoverflow 中的每个线程，但无法解决我的问题。这是我的头部元素：

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap.css" />
        <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/custom.css" />
        <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}bootstrap/css/bootstrap-responsive.css" />


        <!-- Javascript imports-->

        <script src="{{ STATIC_URL }}js/jquery.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap-carousel.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap-tab.js" type="text/javascript"></script>
        <script src="{{ STATIC_URL }}bootstrap/js/bootstrap-scrollspy.js" type="text/javascript"></script>



        <title>Rank Analyzer</title>
        <meta name="author" content="zurelsoft" />
        <!-- Date: 2013-07-18 -->
    </head>

我在正文中调用下拉列表，如下所示：

<div class="btn-group">
         <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i>test</a>
         <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
            <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
            <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="i"></i> Make admin</a></li>
        </ul>
        </div>

下拉菜单未显示。我错过了什么吗？

4

4 回答 4

4

你初始化下拉菜单了吗？

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

下拉菜单的html结构

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>
于 2013-07-19T09:59:37.923 回答
2

它必须工作。检查这个小提琴。
在我看来，您试图两次包含您的引导库。

<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

你为什么不直接使用这个库： http: //twitter.github.io/bootstrap/assets/js/bootstrap.js或者它的缩小版：http: //twitter.github.io/bootstrap/assets/js/ bootstrap.min.js 将包含所有组件。

作为替代方案，您可以包含每个单独的 twitter 引导组件（就像他们在他们的页面中所做的那样），但您不能包含完整的包库。

<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
于 2013-07-19T14:40:37.210 回答
2

我将jquery.js 放在 bootstrap.js 之上并为我工作。如果万一这有帮助..

于 2013-12-16T11:00:44.383 回答
0

尝试这个。您可能想要重构代码。

<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="icon-user icon-white"> Test <span class="caret"></span></button>
            <ul class="dropdown-menu">
              <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
              <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
              <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
              <li class="divider"></li>
              <li><a href="#">Make Admin</a></li>
            </ul>
          </div>
于 2013-07-19T10:05:09.997 回答