简介
downdrop 是一个利用 jQuery 和 Bootstrap 实现的下拉菜单插件，能够简易地创建、自定义和使用下拉菜单。
安装
在使用 downdrop 前，需要先安装 jQuery 和 Bootstrap。可以通过 npm 安装：
npm install jquery bootstrap
之后，执行以下命令安装 downdrop：
npm install downdrop
使用方法
加载文件
在你的 HTML 文件中，需要加载相关的 CSS 和 JS 文件。你可以直接链接到相应的文件：
-- -------------------- ---- ------- ---- -- ------ - --------- - --- -- --- ----- ---------------- ----------------------------------------------- ----- ---------------- --------------------------------------------------------- ---- -- -------- - --- -- --- ----- ---------------- --------------------------------------------------- ---- -- ------ - --------- - -- -- --- ------- ------------------------------------------------------ ------- --------------------------------------------------------------- ---- -- -------- - -- -- --- ------- ----------------------------------------------------------
HTML 结构
在 HTML 中创建下拉菜单的结构如下：
-- -------------------- ---- -------
-- -------- ----------------------- -----------------------
--------
----- ---------------------
----
--- ----------------------
------ ------------------------
------ ---------------- ---------------
------ ------------------ ---- -------------
--- ---------------- ---------------------
------ ------------------ -------------
-----其中，.dropdown-toggle 标签为下拉菜单的触发器，.dropdown-menu 标签为下拉菜单的主体内容。
初始化插件
在以上 HTML 结构创建完成后，需要调用 downdrop 函数来初始化插件。以下示例代码会把 .dropdown-toggle 作为触发器，并为其指定 .dropdown-menu 作为菜单内容：
$(function() {
$('.dropdown-toggle').downdrop({
menu: '.dropdown-menu'
});
});API
下面列出 downdrop 提供的 API。
downdrop(options?)
初始化 downdrop 插件。参数 options 是可选的。
options.menu：指定菜单内容的选择器。
例如：
$('.dropdown-toggle').downdrop({
menu: '.dropdown-menu'
});update()
更新 downdrop 插件。调用该函数后，downdrop 将重新获取下拉菜单的位置。
例如：
$('.dropdown-toggle').downdrop('update');destroy()
销毁 downdrop 插件。
例如：
$('.dropdown-toggle').downdrop('destroy');自定义
downdrop 提供了众多可供自定义的选项。以下为一些常用的选项：
placement
菜单的位置：有 top、bottom、left 和 right。
$('.dropdown-toggle').downdrop({
placement: 'top'
});trigger
触发下拉菜单的事件，默认为 click。
$('.dropdown-toggle').downdrop({
trigger: 'hover'
});delay
下拉菜单的延迟时间。
$('.dropdown-toggle').downdrop({
delay: 500
});更多选项请查看 downdrop 官方文档。
总结
downdrop 插件能够方便地创建、自定义和使用下拉菜单。在 HTML 结构和初始化插件过程中，需要使用一些 jQuery 和 Bootstrap 的语法。熟悉了 downdrop 以后，能够轻易地创建出各种样式的优美下拉菜单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608881e8991b448debc3