简体   繁体   中英

jQuery after first toggle only firing after 3 clicks in Safari iOS5

I am having trouble with jQuery and Safari on an iOS 5 and below devices...
I have a button that onClick toggles a menu, in Safari on iOS 5 and below the menu shows on the first click then closes on the second.. great.. However after that is requires 3 clicks to show the menu again. This does not happen on iOS 6 or on desktop browsers.

I have tried replacing the jQuery toggle() function with the following, but this has not helped.

pull.data('menuState','closed');
$(pull).on('click', function (e) {
if (pull.data('menuState') === 'closed') {
    pull.data('menuState', 'open');
    currentMenu.show();
} else {
    pull.data('menuState', 'closed');
    currentMenu.hide();
}
return false;
});

pull and currentMenu are defined higher in my code. The site is built on bootstrap if that is any help.

Here is what I made to replace toggle function, it seems to work well. just put your needs in function odd and even:

 // place this before all of your code, outside of document ready.
$.fn.ToggleFix = function(odd, even) {
    return this.each(function() {
        var Toggled = false;
        $(this).on("click", function() {
            if (Toggled) {
                Toggled = false;
                return odd.apply(this, arguments);
            }
            Toggled = true;
            return even.apply(this, arguments);
        });
    });
};
//what do you want each toggle to do
function odd() {
    $(this).animate({"left": "+=50px"}, "slow");//EXAMPLE
}

function even() {
    $(this).animate({"left": "-=50px"}, "slow");//EXAMPLE
}
//call your toggle method like this after creating the function you want above
$(function(){ 
    $("YOUR ELEMENT").ToggleFix(even, odd);
 });

jsFIDDLE

Turns out iOS 5 was triggering the window.resize function later in my code, not 100% its the best approach but I detected the version number to code around it.

function iOSversion() {
if (/iP(hone|od|ad)/.test(navigator.platform)) {
    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
    return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
}
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM