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