Twitter Bootstrap下拉菜单未显示

时间:2013-07-26 12:48:51

标签: html django twitter-bootstrap

我正在努力开发一个网站。到目前为止,我有3个页面,都有相同的顶部navbar。我想知道,为什么这个页面不会像其他人一样工作。我确信我已经安装了所有需要安装的东西,但是菜单不起作用。我究竟做错了什么?注意:我正在使用Django。

<!-- HTML -->
<ul class="nav nav-pills">
      <li class="dropdown" id="menu1">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
            Meet the Team
            <i class="icon-user"></i>
        </a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="{% url 'users:team' %}">Lead Developers</a></li>
            <li><a href="{% url 'users:team' %}">Developers</a></li>
            <li><a href="{% url 'users:team' %}">Contributors</a></li>
        </ul>
      <li class="dropdown" id="menu2">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu2">
            Choose Your Plan
            <i class="icon-shopping-cart"></i>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Protection Plans</a></li>
            <li><a href="#">Assistence Plans</a></li>
            <li class="divider"></li>
            <li><a class="disable" href="#">Learn About Busness</a></li>
        </ul>
      </li>
      <li>
        <a href="{% url 'users:question' %}">
            Post a Question
        <i class="icon-globe"></i>
        </a>
      </li>
      <li>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Visit Us
            <i class="icon-plane"></i>
        </a>
      </li>
    </li>
  </ul>

<!-- Javascript -->

<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jquery.js">    </script>

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

<script src="{{ STATIC_URL }}js/jquery.flot.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>

<script type="text/javascript">  
    $(document).ready(function () {  
        $('.dropdown-toggle').dropdown();  


    });  

1 个答案:

答案 0 :(得分:2)

您的代码中有3个'.dropdown-toggle'个链接。您可以一次切换其中一个:

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

工作小提琴:http://jsfiddle.net/hieuh25/fzNjJ/