"二级菜单"
Bootstrap 3.1.0 Snippet by wuxincheng

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h4>鼠标移动自动显示二级菜单</h4> <div class="bs-example"> <ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li class="dropdown"> <a id="drop4" class="js-activated" role="button" data-toggle="dropdown" href="#">个人服务 <b class="caret"></b></a> <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">转账付款</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">信用卡还款</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">手机充值</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">交易记录</a></li> </ul> </li> <li class="dropdown"> <a id="drop5" class="js-activated" role="button" data-toggle="dropdown" href="#">付款方式 <b class="caret"></b></a> <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">网上银行</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">国际银行卡</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">其它方式</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">我要合作</a></li> </ul> </li> <li class="dropdown"> <a id="drop6" class="js-activated" role="button" data-toggle="dropdown" href="#">安全中心 <b class="caret"></b></a> <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">安全管家</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">数字证书</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">支付盾</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">其它合作</a></li> </ul> </li> </ul> <!-- /pills --> </div> <!-- /example --> </div> <script> // very simple to use! $(document).ready(function() { $('.js-activated').dropdownHover().dropdown(); }); </script>
html, body { font-family: Arial, 微软雅黑, Verdana, Geneva, Tahoma, sans-serif, 宋体; }
/** * Project: Bootstrap Hover Dropdown * Author: Cameron Spear * Contributors: Mattia Larentis * * Dependencies: Bootstrap's Dropdown plugin, jQuery * * A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience. * * License: MIT * * http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ */ ;(function ($, window, undefined) { // outside the scope of the jQuery plugin to // keep track of all dropdowns var $allDropdowns = $(); // if instantlyCloseOthers is true, then it will instantly // shut other nav items when a new one is hovered over $.fn.dropdownHover = function (options) { // don't do anything if touch is supported // (plugin causes some issues on mobile) if('ontouchstart' in document) return this; // don't want to affect chaining // the element we really care about // is the dropdown-toggle's parent $allDropdowns = $allDropdowns.add(this.parent()); return this.each(function () { var $this = $(this), $parent = $this.parent(), defaults = { delay: 500, instantlyCloseOthers: true }, data = { delay: $(this).data('delay'), instantlyCloseOthers: $(this).data('close-others') }, showEvent = 'show.bs.dropdown', hideEvent = 'hide.bs.dropdown', // shownEvent = 'shown.bs.dropdown', // hiddenEvent = 'hidden.bs.dropdown', settings = $.extend(true, {}, defaults, options, data), timeout; $parent.hover(function (event) { // so a neighbor can't open the dropdown if(!$parent.hasClass('open') && !$this.is(event.target)) { // stop this event, stop executing any code // in this callback but continue to propagate return true; } $allDropdowns.find(':focus').blur(); if(settings.instantlyCloseOthers === true) $allDropdowns.removeClass('open'); window.clearTimeout(timeout); $parent.addClass('open'); $this.trigger(showEvent); }, function () { timeout = window.setTimeout(function () { $parent.removeClass('open'); $this.trigger(hideEvent); }, settings.delay); }); // this helps with button groups! $this.hover(function () { $allDropdowns.find(':focus').blur(); if(settings.instantlyCloseOthers === true) $allDropdowns.removeClass('open'); window.clearTimeout(timeout); $parent.addClass('open'); $this.trigger(showEvent); }); // handle submenus $parent.find('.dropdown-submenu').each(function (){ var $this = $(this); var subTimeout; $this.hover(function () { window.clearTimeout(subTimeout); $this.children('.dropdown-menu').show(); // always close submenu siblings instantly $this.siblings().children('.dropdown-menu').hide(); }, function () { var $submenu = $this.children('.dropdown-menu'); subTimeout = window.setTimeout(function () { $submenu.hide(); }, settings.delay); }); }); }); }; $(document).ready(function () { // apply dropdownHover to all elements with the data-hover="dropdown" attribute $('[data-hover="dropdown"]').dropdownHover(); }); })(jQuery, this);

Related: See More


Questions / Comments: