为什么 Bootstrap 5.0.1 中的下拉菜单和汉堡菜单无法在任何地方打开？

Question

我最近开始使用 Bootstrap 构建 WordPress 模板（我直接通过我的网站文件下载了 Bootstrap 和 link。）一切正常，除了需要的元素JavaScript，比如下拉菜单。但是，我已经在我的 functions.php 页面中正确地加入了 bootstrap.bundle.min.js 队列。我还包含了 Jquery，并确保两者的顺序正确（Jquery 排在第一位。）但是下拉菜单和汉堡菜单仍然无法打开或工作。它们只会这样显示：dropdown displayed（当你点击它时，没有任何反应）

我试过四处移动，使用不同的浏览器，将 bootstrap.js 和 bootstrap.min.js 等其他脚本加入队列（从不在一起，一次总是一个），但没有任何东西可以使下拉列表在任何设备或任何浏览器。

我在这个类似的 Stack Overflow 问题中尝试了所有解决方案：Twitter Bootstrap dropdown not working in any browser 。仍然没有。

我在下拉列表中使用的代码是从 Bootstrap 文档中复制粘贴的（我添加了 <link> 和 <script> 所以它可以在示例片段。我使用我的 functions.php 页面来排队脚本和样式表):

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

<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>

我将从下面的 functions.php 页面粘贴代码，以防有帮助：

<?php

function loadStylesheets(){

    wp_register_style('bootstrap',get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', array(), 5, 'all');
    wp_enqueue_style('bootstrap');

    wp_register_style('mainStyle',get_template_directory_uri() . '/style.css', array(), false, 'all');
    wp_enqueue_style('mainStyle');

    wp_register_style('fontStyle',get_template_directory_uri() . '/fonts.css', array(), false, 'all');
    wp_enqueue_style('fontStyle');

    wp_register_style('colorStyle',get_template_directory_uri() . '/customColors.css', array(), false, 'all');
    wp_enqueue_style('colorStyle');

}
add_action('wp_enqueue_scripts', 'loadStylesheets');


function includeJquery(){

    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', get_template_directory_uri() . '/scripts/jquery-3.6.0.min.js', '', 3, true);
    add_action('wp_enqueue_scripts', 'jquery');

}
add_action('wp_enqueue_scripts', 'includeJquery');


function loadJS(){

    wp_register_script('bootstrapJS',get_template_directory_uri() . '/bootstrap/js/bootstrap.bundle.min.js', '', 5, true);
    wp_enqueue_script('bootstrapJS');

    wp_register_script('mainScripts',get_template_directory_uri() . '/scripts/scripts.js', '', false, true);
    wp_enqueue_script('mainScripts');


}
add_action('wp_enqueue_scripts', 'loadJS');

伙计们，我为此创建了一个完整的 Stack Overflow 帐户。我从来没有 post 的东西，因为答案通常在这里，但我已经广泛搜索无济于事。心急如焚，为了这个问题折腾了一整天

任何帮助将不胜感激！感谢您的宝贵时间。

Answer 1

看起来您可能一直在使用 Bootstrap ，它使用

元素来包装下拉链接。这里使用的是 v5.0 文档中的示例：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<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>

为什么 Bootstrap 5.0.1 中的下拉菜单和汉堡菜单无法在任何地方打开？

Why are dropdowns and burger menus in Bootstrap 5.0.1 not opening anywhere?

html

javascript

php

wordpress-theming

twitter-bootstrap