Question

我正在尝试在我的网页上使用Dropdown（使用Bootstrap 4.1）。但是，单击下拉列表不会显示任何内容。

我尝试过使用许多不同的代码变体，但仍然没有。网页上还有其他内容，但我已将其全部评论出来，但仍无效。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="courseDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Course
  </button>
  <div class="dropdown-menu" aria-labelledby="courseDropDown">
    <a class="dropdown-item">Course 01</a>
    <a class="dropdown-item">Course 02</a>
    <a class="dropdown-item">Course 03</a>
  </div>

  <button class="btn btn-secondary dropdown-toggle" type="button" id="moduleDropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Module
  </button>
  <div class="dropdown-menu" aria-labelledby="moduleDropDown">
    <a class="dropdown-item">Module 01</a>
    <a class="dropdown-item">Module 02</a>
    <a class="dropdown-item">Module 03</a>
  </div>
</div>

我做错了什么？

Answer 1

要实现预期的结果，请包含所有必需的库 - jQuery，Popper.js和bootstrap

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

对于以下组件 - 根据官方Bootrap4文档

需要Popper.js 用于显示和定位的

下拉列表（也需要Popper.js）
用于显示和定位的工具提示和 popovers （也需要 Popper.js）

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js.

请查看这些链接了解更多详情

https://getbootstrap.com/docs/4.1/getting-started/introduction/ https://getbootstrap.com/docs/4.1/components/dropdowns/

代码示例供参考 - https://codepen.io/nagasai/pen/xjbMXP

Bootstrap 4.1下拉列表不起作用

1 个答案: