导入 Bootstrap 模态后下拉菜单不起作用

Question

我有一个 header 和 dropdown-menu。如果我点击，我会看到菜单。一切都很完美。这是 HTML：

我从 bootstrap 导入模态的另一个页面，当我点击下拉菜单时没有任何反应。在控制台中它没有显示任何错误，但我不知道为什么，我有 2 个事件：

如果我从 Js 中删除我的导入。文件，它将完美运行：

import { Modal } from 'bootstrap';

app.js

const bootstrap = require('bootstrap/dist/js/bootstrap.bundle');

contact.js

import { Modal } from 'bootstrap';


window.addEventListener("DOMContentLoaded", () => {
if (document.getElementById('emailHasBeenSent') !== null && document.getElementById('emailHasBeenSent').value) {
    const modal = new Modal(document.getElementById('contactUsModal')),
        closeModalBtn = document.querySelector('.contact--modal-close-btn');

    modal.show();

    closeModalBtn.addEventListener('click', e => {
        modal.hide();
    })
}});

Bootstrap 的模式似乎“取消”了 onClick 事件下拉菜单。 class 名称保留在“btn dropdown-toggle”而不是“btn dropdown-toggle show”。能帮我看看是哪里出了问题吗

Answer 1

我遇到了类似的问题。直接从 'bootstrap' 导入会导致下拉侦听器消失。

通过使用更深入的导入修复了它：从 'bootstrap/js/dist/modal';

导入模态

转到类别：我不知道为什么但它有效。

导入 Bootstrap 模态后下拉菜单不起作用

Dropdown doesn't work after modal of Bootstrap imported

javascript

drop-down-menu

bootstrap-modal

webpack