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

Question

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

我尝试移动东西，使用不同的浏览器，将其他脚本排入队列，如 bootstrap.js 和 bootstrap.min.js（从不在一起，总是一次一个），没有什么能让下拉菜单在任何设备或任何浏览器上工作。

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

我用于下拉菜单的代码实际上是从 Bootstrap 文档中复制粘贴的（我添加了<link>and ，<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 帐户。我从不发布任何东西，因为答案通常在这里，但我已经搜索了很多，但无济于事。我很绝望，在这个问题上我已经解决了一整天。

任何帮助将不胜感激！谢谢你的时间。

标签： javascriptphphtmltwitter-bootstrapwordpress-theming

Answer 1

看起来您可能一直在使用 Bootstrap <v4.6.x 的文档。在 v5.0 中，下拉菜单类是一个列表 <ul>，它使用 <li> 元素来包装下拉链接。这里使用的是 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>