下拉菜单触发方式设计案例

翔宇 2017-03-28 09:23

下拉菜单提供了两种触发方式来显示：声明式触发和JavaScript触发。下拉菜单在Bootstrap中依赖于dropdown.js，我们既可以到GitHub上下载源码学习其实现过程，也可以直接在Bootstrap.js中查看其实现过程。声明式触发下拉菜单需要用到data-*属性，下拉菜单一般用在导航或者导航条上，在前面讲解菜单以及导航的时候已经多次使用到下拉菜单，代码如下：

代码中定义了一个下拉菜单，我们使用<a>标签按钮来触发弹出下拉菜单。在<a>标签中使用了data-toggle="dropdown"属性，这个属性可以用来控制下拉菜单的显示与隐藏，页面效果如图所示。

上面的代码是一个典型的按钮式下拉菜单，我们可以在导航条中使用下拉菜单。至于如何单击按钮显示下拉菜单则依赖于dropdown.js这个插件，当这个插件被加载之后，会对页面中所有的带有data-toggle="dropdown"属性的元素进行解析绑定事件，当用户单击按钮或者链接的时候会给class="dropdown"容器下的<ul>class="dropdown-menu"下拉菜单添加一个class="open"样式类，再次单击的时候则会删除"open"类，隐藏下拉菜单。

下拉菜单（dropdown）也支持用JavaScript方式来触发，用法和原理与对话框（modal）一样。我们可以使用dropdown()方法来显示和隐藏下拉菜单，声明式的下拉菜单依赖data-toggle="dropdown"。在使用JavaScript触发下拉菜单的时候我们删除这个属性，去掉声明式触发，代码如下：

代码中定义了一个触发按钮以及一个下拉菜单，下拉菜单中我们删除了data-toggle="dropdown"属性，这个时候单击下拉菜单是不能显示的，我们需要使用dropdown()方法来绑定触发，代码如下：

$("#dropMenu").dropdown();

在页面加载完成之后使用这段JavaScript代码，可以绑定下拉菜单的触发。注意，这里的对象是单击的操作对象而不是class="dropdown"，也不是class="dropdown-menu"。使用这种方式绑定之后可以单击一次下拉菜单显示，之后再无其他效果。我们也可以使用手动方式去触发绑定，在上面的代码中我们使用了触发按钮，在触发按钮的单击事件中我们调用上面一段JavaScript代码。

$("#btnClick").click(function () {

$("#dropMenu").dropdown();

});

这段代码也是在页面加载之后执行，只有单击触发按钮之后才能单击下拉菜单，并且下拉菜单只能显示一次之后再无任何效果。当然这样做毫无意义，只是为了了解下拉菜单的触发原理。

$("#dropMenu").dropdown("toggle");

你也可以使用带有参数的dropdown()方法，参数值为"toggle"。当下拉菜单是隐藏状态时则单击后显示，如果下拉菜单为显示状态则单击后隐藏。这和对话框基本一致。

Bootstrap中的下拉菜单（dropdown）提供了四个事件。show.bs.dropdown：在下拉菜单显示之前触发。shown.bs.dropdown：在下拉菜单显示完成之后触发。hide.bs.dropdown：在下拉菜单隐藏之前触发。hidden.bs.dropdown：在下拉菜单隐藏之后触发。这四个事件和对话框（modal）中的事件相似，其执行先后顺序我们通过对话框的案例和事件的名称可以知道。通过下面的代码可以简单了解事件的调用方式：

代码中我们为下拉菜单绑定了四个事件，在四个事件触发的时候分别回调一个函数弹出相应的事件名。这里需要特别注意的是，触发事件绑定的是下拉菜单最外层容器class="dropdown"，而不是触发的按钮和下拉菜单项。这在下拉菜单中比较特殊，即事件触发以及方法的调用对象不一致。