Bootstrap 下拉菜单不起作用且不下拉答案

【问题标题】：Bootstrap dropdown not working and not dropping downBootstrap 下拉菜单不起作用且不下拉
【发布时间】：2021-12-19 21:06:00
【问题描述】：

我正在制作一个小型 VueJS 页面，它将成为一个 SPA。下拉菜单不起作用。无论我从引导指南中复制了多少内容或阅读了他们的建议。它只是没有。我错过了什么？

他们说 popper.js 包含在 bootstrap.min.js 中他们说你需要把东西包装在 .dropdown 元素中阅读 jQuery 需要在 bootstrap js 之前出现的 SO 问题，也这样做了

我复制了他们的例子。没有运气。

谢谢

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>

<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown button
            </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div id="wanderer">
    <ul v-for="todo in todos">
      <li>{{todo.text}}</li>
    </ul>
  </div>
  <script>
    var wandererApp = new Vue({
      el: '#wanderer',
      data: {
        todos: [{
            text: 'AAAAAA'
          },
          {
            text: 'ZZZZZZZ'
          }
        ]
      }
    });
  </script>
</body>

【问题讨论】：

我删除了你的咆哮。这里不合适。这也是错误的，因为错误是你的。请务必为您正在加载的库使用正确的文档。如果您按照twitter-bootstrap 标签中的说明标记您的 Bootstrap 版本，这将有助于清除所有这些问题。
另外，Bootstrap 5 不需要 jQuery。大多数开发人员建议您从应用程序中清除它，除非您真的需要它。

标签： jquery twitter-bootstrap vue.js drop-down-menu

【解决方案1】：

您的下拉菜单不起作用的原因是您使用的是 5.0 Bootstrap CDN 并将其与旧的 4.0 语法配对。您需要更改语法以匹配 5.0 CDN。我已经在下面输入了。如果这有帮助，您可以在之后添加您的待办事项列表。

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>

<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown button
          </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

【讨论】：

为了更清楚，数据属性缺少-bs 子字符串。