在Navbar中没有扩展的简单Bootstrap下拉列表苦苦挣扎

Question

我一直试图让这个导航栏下拉按钮起作用。除了显示向下箭头，我可以实现的唯一点击操作是遵循href。这会创建一个无用的触发器example.com/#，而不是我想要创建的下拉链接列表。

我已将所需的JS脚本加载到我的HTML标头中。

以下是完整的导航栏代码：

<div class="masthead">
<h3 class="text-muted">example.com</h3>
<br />
<nav>
  <ul class="nav nav-justified col-xs-2 col-sm-1">
  <li><a href="../index">Home</a></li>
    <li class="dropdown"><a data-target="#" class="dropdown-toggle" href="#" data-toggle="dropdown">Projects<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="../../_site/Home">Home</a></li>
      <li><a href="../../_site/Business">Business</a></li>
      <li><a href="../../_site/Automobile">Automobile</a></li>
      <li><a href="../../_site/Family">Family</a></li>
      <li><a href="../../_site/Community">Community</a></li>
      <li><a href="../../_site/National Parks">National Parks</a></li>
    </ul></li>
      <li><a href="#">Services</a></li>
      <li><a href="Blog">Blog</a></li>
      <li><a href="About">About</a></li>
      <li><a href="Contact">Contact</a></li>
    </ul>
  </nav>
 </div>

似乎很简单吧？但为什么它不起作用？荣誉。

Answer 1

必须与包含脚本的方式有关。请检查chrome控制台输出并将其粘贴到此处。

我只是将你的代码粘贴到我的bootstrap项目中，它开箱即用（我从

中删除了href =“＃”

<a data-target="#" class="dropdown-toggle" href="#" data-toggle="dropdown">Projects<b class="caret"></b></a>
    <ul class="dropdown-menu">

它看起来像这样：