Jquery代码适用于chrome和FF,但不适用于IE

时间:2014-01-16 03:59:37

标签: jquery

我使用的是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);
}

0 个答案:

没有答案