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

亦凉 2022-04-10 08:41 271阅读 0赞

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的下拉框有严重的排它性，一个页面只能打开一个下拉框，也无法通过套嵌组建多级下拉框。

下面是它的源码，我们发现它是支持键盘切换的，但写得很烂，乃至多数情况下失败。

<!DOCTYPE html> <html> <head> <title>bootstrap学习 by 司徒正美</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()\{ //注意：事件要绑定在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); \}