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

Question

我有一个带有下拉菜单的标题。如果我点击，我会看到菜单。一切工作都很完美。这是 HTML：

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

如果我从 Js 中删除导入。文件，它将完美地工作：

import { Modal } from 'bootstrap';

应用程序.js

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

联系.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 事件下拉列表。类名保留在“btn dropdown-toggle”上，而不是“btn dropdown-toggle show ”上。你能帮我看看问题出在哪里吗？

Answer 1

我有类似的问题。直接从“bootstrap”导入会导致下拉侦听器消失。

通过使用更深层次的导入来修复它： import Modal from 'bootstrap/js/dist/modal';

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