Question

我希望nav-pill有一个下拉列表，显示一些不同的选项。为此，我就是这样：

    <nav>
      <ul class="nav nav-pills pull-right">
        <li role="presentation" class="active"><a href="{% url 'home' %}">Home</a></li>
        <li role="presentation"><a href="{% url 'faq' %}">FAQ's</a></li>
        <li role="presentation" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
      </ul>
    </nav>

但这似乎不起作用。我可以看到下拉列表，但是当我点击时，没有任何反应。想知道是否有人遇到过同样的问题。

感谢。

Answer 1

您的代码似乎工作正常我在以下链接Fiddle中有一个工作小提琴。

<nav>
  <ul class="nav nav-pills pull-right">
    <li role="presentation" class="active"><a href="{% url 'home' %}">Home</a></li>
    <li role="presentation"><a href="{% url 'faq' %}">FAQ's</a></li>
    <li role="presentation" class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">Nav header</li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
  </ul>
</nav>

确保以正确的顺序加载库，首先加载jquery.js然后再加载bootstrap.js。如果这不是问题，那么你很可能有冲突的javascript。逐个取出javascript文件，看看javascript与bootstrap的javascript有什么冲突。

Answer 2

正如Drinkin People所写，你有工作代码！只需在jquery.js

之前加载bootstrap.js脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

jsfiddle-link

导航丸与bootstrap3中的下拉列表

2 个答案: