Question

I’ve got a problem that has me stumped. I’m building a fairly simple mobile site and want to use jQuery to make a menu for all the pages. I have a simple UList that is holding the menu elements. It’s hidden via CSS when I load the page

item { display:none }

I want to use the following to display it when a “link” is clicked:

    $("header div.menu-box a").click(function(event){
    event.preventDefault();

    if($("#header_wrapper .menu-box .menu-text").text() == 'Menu') {
        $("#header_wrapper .menu-box .menu-text").text("Close");
        $("#popmenu").slideDown(500);
    }
    else {
        $("#header_wrapper .menu-box .menu-text").html("Menu");
        $("#popmenu").slideUp(500);
    }
    return false;
});

It works fine in Firefox & Safari with an iPhone browser agent, as well as on an iPhone. However on my new Android Razr it crashes the browser. Any ideas would be VERY welcome.

Thanks.

Answer 1

jQuery effects (slideUp, etc) will crash Android browsers because of this jQuery bug which has been fixed in jQuery 1.8.3 (1.8.2 still crashes Android).