bootstrap-dropdown组件是个烂东西，我读后的整体感觉。
一个下拉开菜单的设计：
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">动作</a></li>
<li><a href="#">另一个动作</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">另一个链接</a></li>
</ul>
</li>
</ul>
首先下拉开菜单其中就是当中第二层的UL元素，类名为dropdown-menu。下拉菜单通常处于隐藏状态。我们可以在它的父元素上加个open类名，让它显示出来。它的父元素通常带个dropdown类名，其实是提供了一个相对定位的包含块。当然除了dropdown外，你还可以选择用dropup。dropdown是让下拉菜单向下显示，dropup是向上展示。要打开下拉菜单，通常我们要点击某处让它显示出来。我们称之为触发器。这个触发器带一个data-toggle=dropdown的自定义属性。通过前面的学习，你们应该隐约察觉到，data-toggle在bootstrap有特殊意义，是让目标对象表现某一类控件，什么data-toggle=button,data-toggle=buttons-checked,data-toggle=radio……不过它还有专门的类名dropdown-toggle。触发器可以通过data-target自定义属性指定目标下拉框打开，也可以通过href属性打开。不过bootstrap的下拉框有严重的排它性，一个页面只能打开一个下拉框，也无法通过套嵌组建多级下拉框。
下面是它的源码，我们发现它是支持键盘切换的，但写得很烂，乃至多数情况下失败。
!function ($) {
"use strict"; // jshint ;_;
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle=dropdown]'
, Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
}
Dropdown.prototype = {
constructor: Dropdown ,
toggle: function (e) {
var $this = $(this)
, $parent
, isActive
if ($this.is('.disabled, :disabled')) return
//分别通过以下三个途径：
//1 data-target自定义属性
//2 href的属性中的hash（也是ID选择器），
//3这个按钮的直属父节点
$parent = getParent($this)
isActive = $parent.hasClass('open')
//每次页面只能有一个菜单被打开，这是个失败的设计
clearMenus()
//如果没有打开，则打开它
if (!isActive) {
$parent.toggleClass('open')
}
//让当前菜单项获得焦点
$this.focus()
return false
} ,
keydown: function (e) {
var $this
, $items
, $parent
, isActive
, index
//如果不是上下方向键或回车键,返回
if (!/(38|40|27)/.test(e.keyCode)) return
$this = $(this)
e.preventDefault()
e.stopPropagation()
//如果标识为禁止状态
if ($this.is('.disabled, :disabled')) return
//取得控件的容器
$parent = getParent($this)
//如果处于激活状态
isActive = $parent.hasClass('open')
//如果没有激活或激话了+回车,就触发其点击事件
if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
//如果是菜单项(不能是作为分隔线的LI)下的A元素
$items = $('[role=menu] li:not(.divider):visible a', $parent)
if (!$items.length) return
//那么我们取得当前获得焦点的元素作为基准,通过它上下移动
index = $items.index($items.filter(':focus'))
if (e.keyCode == 38 && index > 0) index-- // up
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
if (!~index) index = 0//如果是-1,那么回到第一个
//然后焦点落在它之上
$items
.eq(index)
.focus()
}
}
function clearMenus() {//请空页面上所有显示出来下拉菜单
$(toggle).each(function () {
getParent($(this)).removeClass('open')
})
}
function getParent($this) {
var selector = $this.attr('data-target') , $parent
if (!selector) {
selector = $this.attr('href')//只能取ID选择器了
selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
return $parent
}
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
var old = $.fn.dropdown
$.fn.dropdown = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('dropdown')
if (!data) $this.data('dropdown', (data = new Dropdown(this)))
//这个option从原型来看，也只能是toggle
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.dropdown.Constructor = Dropdown
/* DROPDOWN NO CONFLICT
* ==================== */
$.fn.dropdown.noConflict = function () {
$.fn.dropdown = old
return this
}
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(document)//绑定事件
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) {
e.stopPropagation()
})
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) {
e.stopPropagation()
}) //这里是用于绑定到某个链接或按钮上,点击它让某个下拉菜单打开
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
//绑定键盘事件,方便在菜单项中上下移动
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
}(window.jQuery);
以下是它对应的less。
// // Dropdown menus // -------------------------------------------------- // Use the .menu class on any