我使用的是Chrome v32和Jquery 1.10.2。以下代码适用于所有浏览器,但IE78 / 9/10 / 我没有测试即11.在IE中使用时,下拉div不在正确的位置。它偏离右侧。
var menuObjects = [];
var dropdowns = $('[data-toggle="dropdown"]')
$.each(dropdowns, function(index, value){
var hoverButton = $(value);
var dropdownDiv = $($(value).attr("data-target"));
var o = {
hoverButton: hoverButton, //The button that activates the dropdown
dropdownDiv: dropdownDiv, //The dropdown menu itself
flag: hoverButton.css("display") == false, //true = show, false = don't show/hide
timer: null, //To be set in dropdownShow function
delay: 400 //The default delay time
};
menuObjects.push(o);
//Add event listeners to both the button and the dropdown menu itself
$(hoverButton).hover(
function(){ dropdownShow(o, true); }, //over
function(){ dropdownShow(o, false); } //out
);
$(dropdownDiv).hover(
function(){ dropdownShow(o, true); }, //over
function(){ dropdownShow(o, false); } //out
);
});
/**
* The dropdownShow timeout callback function -- if the mouse is not over either
* the button or the menu then hide the menu, or if it is and it's hidden then show it.
*/
function dropdownToggle(obj){
if (obj.flag && obj.dropdownDiv.css("display") == "none") {
var o = obj.hoverButton.offset();
//Use some default offset values if they are not defined in the object
var dropdownY = o.top + obj.hoverButton.height() + 15;
var dropdownX = o.left - obj.dropdownDiv.width() + obj.hoverButton.width()
+ removePx(obj.hoverButton.css("padding-left"))
+ removePx(obj.hoverButton.css("padding-right"));
obj.dropdownDiv.css("top", dropdownY);
obj.dropdownDiv.css("left", dropdownX);
obj.dropdownDiv.show();
} else if (!obj.flag && obj.dropdownDiv.css("display") == "block") {
obj.dropdownDiv.hide();
}
}
/**
* Formats padding and margin values -- removes 'px' from the end and converts it to an integer.
*/
function removePx(el) {
return parseInt(el.slice(0, -2))
}
function dropdownShow(obj, flag, hideDelay) {
if (hideDelay == null) hideDelay = obj.delay;
obj.flag = flag;
if (obj.timer) clearTimeout(obj.timer);
obj.timer = setTimeout(function(){
dropdownToggle(obj);
}, hideDelay);
}