使用 JavaScript 的代码我们也可以切换显示下拉菜单 .. 这里我们直接先在控制台上试一下 ... 先找到页面上的切换下拉菜单的元素 .. 这里就是 .dropdown-toggle ... 用一下 Bootstrap 提供的 dropdown 这个方法 .. 给它一个参数 .. toggle

执行一下 .. 会显示下拉菜单 ... 再执行一次 ... 又会隐藏下拉菜单 ..

下接菜单在开始显示，完全显示，开始隐藏，完全隐藏的时候都会发生自定义的事件 .. 我们可以在应用里去监听这些事件 .. 先在下拉菜单的大包装上添加一个 id ... dropdown-demo ..

然后打开在页面上链接的自定义脚本 .. script.js ... 在这里，可以先找到页面上的 dropdown-demo 这个 id 的元素 .. 用一下 on 这个方法，去监听发生的事情，事件的名字是 show.bs.dropdown .. 开始显示下拉菜单的时候会发生这个事件 ..

我们先简单的控制台上输出一个 show ...

再复制几份 ... 修改一下事件的名字还有输出的东西 .. 完全显示会发生 shown.bs.dropdown ...

开始隐藏会发生 hide.bs.dropdown ... 完全隐藏的时候会发生一个 hidden.bs.dropdown

再去试一下 ...

打开下拉菜单 .. 一开始会发生 show.bs.dropdown .. 控制台上会输出一个 show .. 完全显示以后会发生 shown.bs.dropdown .. 我们在控制台上又输出了一个 shown

再隐藏下拉菜单 ... 开始隐藏会发生 hide.bs.dropdown，控制台上会输出一个 hide ... 等它完全隐藏以后，又会发生 hidden.bs.dropdown ... 控制台上会输出一个 hidden ...