如何独立使用Bootstrap dropdown.js

Question

是否可以在不使用Bootstrap库的其余部分的情况下使用Bootstrap-dropdown.js组件？我试过了，但没能成功。

从文档中，我可以看到dropdown.js组件需要Popper，并且我可以在GitHub上找到dropdown.jsp src文件。

但dropdown.js似乎有很多依赖项：

import * as Popper from '@popperjs/core'
import {
defineJQueryPlugin,
getElement,
getElementFromSelector,
isDisabled,
isElement,
isVisible,
isRTL,
noop,
getNextActiveElement,
typeCheckConfig
} from './util/index'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
import BaseComponent from './base-component'

我不知道该怎么办。我已经尝试删除它们，但我只是收到错误消息，文件中稍后的变量是未定义的。

Answer 1

您可以这样使用。导入下拉模块并对其进行初始化。

import { Dropdown } from "bootstrap";
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new Dropdown(dropdownToggleEl)
})

Answer 2

这是不可能的。Dropdown.js是使用popper.js内部的函数和引导程序库构建的。

如果你正在为下拉列表寻找引导程序之外的东西，我推荐使用jQuery的chosen.js。如果你下载了源文件，你可以修改css，使其更符合你的喜好。

除此之外，您还可以制作自己的普通javascript下拉列表。

如果你真的很喜欢dropdown.js，但需要将其独立，你可以使用开发人员工具对其进行逆向工程，并制作自己的。