bootstrap之dropdown

一、前言

这节介绍下dropdown(下拉菜单)模块的源码实现。

二、源码

1、dropdowns.less

 //
 // Dropdown menus(下拉菜单)
 // --------------------------------------------------

 // Dropdown arrow/caret(下拉菜单箭头)
 .caret {
   display: inline-block;
   width: 0;
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
   border-top:   @caret-width-base dashed;
   border-top:   @caret-width-base solid ~"\9"; // IE8
   border-right: @caret-width-base solid transparent;
   border-left:  @caret-width-base solid transparent;
 }

 // The dropdown wrapper (div: 下拉菜单容器)
 .dropup,
 .dropdown {
   position: relative;
 }

 // Prevent the focus on the dropdown toggle when closing dropdowns
 .dropdown-toggle:focus {
   outline: 0;
 }

 // The dropdown menu (ul: 下拉菜单)
 .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: @zindex-dropdown;
   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;
   font-size: @font-size-base;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   background-color: @dropdown-bg;
   border: 1px solid @dropdown-fallback-border; // IE8 fallback
   border: 1px solid @dropdown-border;
   border-radius: @border-radius-base;
   .box-shadow(0 6px 12px rgba(0,0,0,.175));
   background-clip: padding-box;

   // Aligns the dropdown menu to right(下拉菜单右对齐)
   //
   // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
   &.pull-right {
     right: 0;
     left: auto;
   }

   // Dividers (basically an hr) within the dropdown(下拉分割线)
   .divider {
     .nav-divider(@dropdown-divider-bg);
   }

   // Links within the dropdown menu(下拉菜单链接)
   > li > a {
     display: block;
     padding: 3px 20px;
     clear: both;
     font-weight: normal;
     line-height: @line-height-base;
     color: @dropdown-link-color;
     white-space: nowrap; // prevent links from randomly breaking onto new lines
   }
 }

 // Hover/Focus state(菜单项状态: 悬浮状态、焦点状态)
 .dropdown-menu > li > a {
   &:hover,
   &:focus {
     text-decoration: none;
     color: @dropdown-link-hover-color;
     background-color: @dropdown-link-hover-bg;
   }
 }

 // Active state(当前状态)
 .dropdown-menu > .active > a {
   &,
   &:hover,
   &:focus {
     color: @dropdown-link-active-color;
     text-decoration: none;
     outline: