为什么我的 Bootstrap 5 导航栏下拉菜单即使使用 jQuery 也不起作用？-js教程-PHP中文网

为什么我的 Bootstrap 5 导航栏下拉菜单即使使用 jQuery 也不起作用？

Susan Sarandon

发布： 2024-12-08 19:32:14

原创

181 人浏览过

Why isn't my Bootstrap 5 navbar dropdown working even with jQuery?

Bootstrap 5 导航栏下拉问题

尝试使用 Bootstrap 5 实现响应式导航菜单时，用户可能会遇到下拉按钮的问题或菜单项无法按预期运行。即使项目中包含 jQuery，也可能会出现此问题。

原因

在 Bootstrap 5 中，JavaScript 插件的 data-* 属性已更改。之前使用的是 data-toggle 和 data-target，但在 Bootstrap 5 中，它们已分别替换为 data-bs-toggle 和 data-bs-target。

解决方案

要解决此问题，请将旧的 data- 属性替换为新的 data-bs-属性：

<button>

登录后复制

其他注意事项

除了 data-* 属性的更改之外，Bootstrap 5 还引入了其他更改。例如，ml-auto 和 mr-auto 类已替换为 ms-auto 和 me-auto。

演示

此代码片段演示了功能下拉列表按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap</title>
    <link
        href="https://cdn.jsdelivr.net/npm/[email&#160;protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous"
    />
</head>
<body>
    <nav>

登录后复制

以上是为什么我的 Bootstrap 5 导航栏下拉菜单即使使用 jQuery 也不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！