bootstrap源码学习与示例：bootstrap-dropdown

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);

<!DOCTYPE html> <html> <head> <title>bootstrap学习 by 司徒正美</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="https://files.cnblogs.com/rubylouvre/bootstrap.css"/> <script src="https://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script> <script src="https://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script> <script src="https://files.cnblogs.com/rubylouvre/bootstrap-dropdown.js"></script> <script> $(function(){ //注意：事件要绑定在UI容器上，而不是关闭按钮中 $('.dropdown-toggle').dropdown() }) </script> </head> <body> <div id="navbar-example" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">项目名称</a> <ul class="nav"> <li 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> <li class="dropdown open"> <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 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> </div> </div> </div> <br/> <br/> <br/> <br/> <br/> <ul class="nav nav-pills"> <li><a href="#">规则的链接</a></li> <li class="dropup" id="menutest1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menutest1"> 下拉项 <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> <li class="active"> <a data-toggle="dropdown" href="#menutest1"> 点击我看看 </a> </li> </ul> </body> </html>

运行代码

以下是它对应的less。

//
// Dropdown menus
// --------------------------------------------------


// Use the .menu class on any 
 element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropup,
.dropdown {
  position: relative;
}
.dropdown-toggle {
  // The caret makes the toggle a bit too tall in IE7
  *margin-bottom: -3px;
}
.dropdown-toggle:active,
.open .dropdown-toggle {
  outline: 0;
}

// Dropdown arrow/caret
// --------------------
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top:   4px solid @black;
  border-right: 4px solid transparent;
  border-left:  4px solid transparent;
  content: "";
}

// Place the caret
.dropdown .caret {
  margin-top: 8px;
  margin-left: 2px;
}

// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: @zindexDropdown;
  display: none; // none by default, but block on "open" of the menu
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0; // override default ul
  list-style: none;
  background-color: @dropdownBackground;
  border: 1px solid #ccc; // Fallback for IE7-8
  border: 1px solid @dropdownBorder;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  .border-radius(6px);
  .box-shadow(0 5px 10px rgba(0,0,0,.2));
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;

  // Aligns the dropdown menu to right
  &.pull-right {
    right: 0;
    left: auto;
  }

  // Dividers (basically an hr) within the dropdown
  .divider {
    .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
  }

  // Links within the dropdown menu
  li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: @baseLineHeight;
    color: @dropdownLinkColor;
    white-space: nowrap;
  }
}

// Hover state
// -----------
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  text-decoration: none;
  color: @dropdownLinkColorHover;
  #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
}

// Active state
// ------------
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
  color: @dropdownLinkColorActive;
  text-decoration: none;
  outline: 0;
  #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
}

// Disabled state
// --------------
// Gray out text and ensure the hover state remains gray
.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover {
  color: @grayLight;
}
// Nuke hover effects
.dropdown-menu .disabled > a:hover {
  text-decoration: none;
  background-color: transparent;
  background-image: none; // Remove CSS gradient
  .reset-filter();
  cursor: default;
}

// Open state for the dropdown
// ---------------------------
.open {
  // IE7's z-index only goes to the nearest positioned ancestor, which would
  // make the menu appear below buttons that appeared later on the page
  *z-index: @zindexDropdown;

  & > .dropdown-menu {
    display: block;
  }
}

// Right aligned dropdowns
// ---------------------------
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown {
  // Reverse the caret
  .caret {
    border-top: 0;
    border-bottom: 4px solid @black;
    content: "";
  }
  // Different positioning for bottom up menu
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
  }
}

// Sub menus
// ---------------------------
.dropdown-submenu {
  position: relative;
}
// Default dropdowns
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  .border-radius(0 6px 6px 6px);
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

// Dropups
.dropup .dropdown-submenu > .dropdown-menu {
  top: auto;
  bottom: 0;
  margin-top: 0;
  margin-bottom: -2px;
  .border-radius(5px 5px 5px 0);
}

// Caret to indicate there is a submenu
.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: darken(@dropdownBackground, 20%);
  margin-top: 5px;
  margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
  border-left-color: @dropdownLinkColorHover;
}

// Left aligned submenus
.dropdown-submenu.pull-left {
  // Undo the float
  // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
  float: none;

  // Positioning the submenu
  > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    .border-radius(6px 0 6px 6px);
  }
}

// Tweak nav headers
// -----------------
// Increase padding from 15px to 20px on sides
.dropdown .dropdown-menu .nav-header {
  padding-left: 20px;
  padding-right: 20px;
}

// Typeahead
// ---------
.typeahead {
  z-index: 1051;
  margin-top: 2px; // give it some space to breathe
  .border-radius(@baseBorderRadius);
}