为什么该Bootstrap下拉列表在单击时不显示内容？

Question

我正在使用Bootstrap css，并且有一个“商店”下拉列表，单击它时，列表中的内容应该像在Bootstrap文档中一样显示：

https://getbootstrap.com/docs/4.0/components/dropdowns/

有人可以告诉我这出了什么问题吗？据我所知，这应该在不包含Bootstrap javascript的情况下起作用。这是一个jsfiddle示例：

https://jsfiddle.net/Le43a8o2/

<nav class='navbar navbar-light bg-light'>
  <a class='navbar-brand' [routerLink]="['/']">{{pageTitle}}</a>
  <ul class="nav nav-pills justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
      <li class="nav-item">
          <div class="dropdown">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Stores
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <button class="dropdown-item" type="button">Action</button>
                <button class="dropdown-item" type="button">Another action</button>
                <button class="dropdown-item" type="button">Something else here</button>
              </div>
          </div>  
      </li>
    </ul>
   </nav>

Answer 1

您同时需要jQuery和Bootstrap javascript。尝试在您的JS小提琴中添加这2个资源，看看是否可行。