单击后未打开引导程序下拉菜单答案

【问题标题】：Bootstrap dropdown menu not opened after clicking单击后未打开引导程序下拉菜单
【发布时间】：2017-12-14 16:26:33
【问题描述】：

我正在从 Angular-cli 生成的全新 Angular 2 项目中运行此代码。但是，单击按钮后，下拉菜单无法显示。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <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><a href="#">Separated link</a></li>
  </ul>
</div>

【问题讨论】：

标签： angular angular-ui-bootstrap

【解决方案1】：

您需要加载下拉行为所需的 bootstrap.js 文件（之前还加载了 jquery）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <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><a href="#">Separated link</a></li>
  </ul>
</div>

【讨论】：

谢谢！有用。我错过了引导 js 文件。

【解决方案2】：

请在您的 index.html 中添加以下两个脚本并尝试：

      <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：

谢谢！有用。我错过了引导 js 文件。