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