Bootstrap source code learning and example: Bootstrap-dropdown

The bootstrap-dropdown component is a bad thing, and the overall feeling after I read it.

Design of a menu to be opened below:

 
<Ul class = "nav pull-Right"> <li id = "Fat-menu" class = "dropdown"> <a href = "#" class = "dropdown-toggle" data-Toggle = "dropdown"> drop-down <B class = "caret"> </B> </a> <ul class = "dropdown-menu"> <li>  
First, open the menu, which is the UL element of the second layer. The class name is dropdown-menu. The drop-down menu is usually hidden. We can add an Open Class Name to its parent element to display it. Its Parent element usually has a dropdown class name. In fact, it provides a relatively locating inclusion block. Of course, in addition to dropdown, you can also choose to use dropup. Dropdown is to display the drop-down menu downward, while dropup is to display up. To open the drop-down menu, we usually need to click somewhere to display it. We call it a trigger. This trigger carries a custom property of data-Toggle = dropdown. Through the previous study, you should vaguely notice that data-Toggle has a special significance in Bootstrap, which is to make the target object express a certain type of control, what data-Toggle = button, data-Toggle = buttons-checked, data-Toggle = radio ...... However, it also has the specialized class name dropdown-toggle. The trigger can be opened in the target drop-down box through the data-target custom attribute, or through the href attribute. However, the bootstrap drop-down box has a serious level of parallelism. A single page can only open one drop-down box, and a multi-level drop-down box cannot be formed through nesting.
 

 
The following is its source code. We found that it supports keyboard switching, but it is poorly written, and even fails in most cases.
 

! 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 // use the following three methods: // Hash (also ID selector) in the attributes of the data-target custom attribute // 2 href ), // 3 direct parent node $ parent = getparent ($ this) isactive = $ parent. hasclass ('open') // only one menu can be opened on the page each time. This is a failed design clearmenus () // open it if (! Isactive) {$ parent. toggleclass ('open')} // get the focus of the current menu item $ this. focus () return false}, keydown: function (e) {var $ this, $ items, $ parent, isactive, index // if not the up/down or return key, return if (! /(38 | 40 | 27 )/. test (E. keycode) return $ this = $ (this) E. preventdefault () E. stoppropagation () // if it is identified as forbidden state if ($ this. is ('. disabled,: Disabled ') return // get the control container $ parent = getparent ($ this) // If isactive = $ parent. hasclass ('open') // if it is not activated or exciting + press enter, the click event if (! Isactive | (isactive & E. keycode = 27) return $ this. click () // if it is a menu item (cannot be Li as a separator), $ items = $ ('[role = menu] Li: Not (. divider): visible A', $ parent) if (! $ Items. length) return // then we get the element with the current focus as the benchmark and use it to move the index up and down = $ items. index ($ items. filter (': Focal') if (E. keycode = 38 & index> 0) index -- // up if (E. keycode = 40 & Index<! Doctype HTML> <pead> <title> Bootstrap learning by situ zhengmei </title> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <LINK rel =" stylesheet "href =" http://files.cnblogs.com/rubylouvre/bootstrap.css "/> <SCRIPT src =" http://files.cnblogs.com/rubylouvre/jquery1.83.js "> </SCRIPT> <SCRIPT src =" http://files.cnblogs.com/rubylouvre/bootstrap-transition.js "> </SCRIPT> <SCRIPT src = "http://files.cnblogs.com/rubylouvre/bootstrap-dropdown.js"> </SCRIPT> <SCRIPT> $ (function () {// Note: events must be bound to the UI container, rather than the $ ('. dropdown-Toggle '). dropdown ()}) </SCRIPT> </pead> <body> <Div id = "navbar-Example" class = "navbar-static"> <Div class = "navbar-inner"> <div class = "Container" style = "width: auto; "> <a class =" brand "href =" # "> project name </a> <ul class =" nav "> <li class =" dropdown "> <a href = "#" class = "dropdown-toggle" data-Toggle = "dropdown"> drop-down <B class = "caret"> </B> </a> <ul class = "dropdown-menu"> <li> <a href = "#"> action </a> </LI> <li> <a href = "#"> another action </A> </LI> <li> <a href = "#"> others </a> </LI> <li class = "divider"> </LI> <LI> <a href = "#"> another link </a> </LI> </ul> </LI> <li class = "dropdown open"> <a href = "#" class = "dropdown-toggle" data-Toggle = "dropdown"> drop-down <B class = "caret"> </B> </a> <ul class = "dropdown-menu"> <li> <a href = "#"> action </a> </LI> <li> <a href = "#"> another action </A> </LI> <li> <a href = "#"> others </a> </LI> <li class = "divider"> </LI> <LI> <a href = "#"> another link </a> </LI> </ul> <ul class = "nav pull- right "> <li id =" Fat-menu "class =" dropdown "> <a href =" # "class =" dropdown-toggle "data-Toggle =" dropdown "> drop-down <B class = "caret"> </B> </a> <ul class = "dropdown-menu"> <li> <a href = "#"> action </A> </LI> <li> <a href = "#"> another action </a> </LI> <li> <a href = "#"> others </a> </LI> <li class = "divider"> </LI> <li> <a href = "#"> another link </a> </Li> </ul> </LI> </ul> </div> <br/> <br/> <ul class = "nav-pills"> <li> <a href = "#"> rule link </a> </LI> <li class = "dropup" id = "menutest1"> <a class = "dropdown-toggle" data-Toggle = "dropdown" href = "# menutest1"> drop-down <B class = "caret"> </B> </a> <ul class = "dropdown-menu"> <li> <a href = "#"> action </a> </ LI> <li> <a href = "#"> another action </a> </LI> <li> <a href = "#"> others </a> </LI> <li class = "divider"> </LI> <li> <a href = "#"> separated Links </a> </LI> </ ul> </LI> <li class = "active"> <a data-Toggle = "dropdown" href = "# menutest1"> Click here to see </a> </Li> </ul> </body> </ptml>
RunCode
 
 
The following is its 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> {
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> {
Text-Decoration: none;
Color: @ dropdownlinkcolorhover;
# Gradient>. Vertical (@ dropdownlinkbackgroundhover, darken (@ dropdownlinkbackgroundhover, 5% ));
}
 
// Active state
//------------
. Dropdown-menu. Active>,
. Dropdown-menu. Active> A: hover {
Color: @ dropdownlinkcolvalid;
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>,
. 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 wowould
// 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 (@ fig, 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 );
}