0

I have the following script

$(document).ready(function(){
    var link = $('.menu > ul > li');
    $(link).click (function(e) {
        $(this).addClass('active').siblings().removeClass('active');
        var a = $(e.target).attr('href');
        if(a == '#'){
            e.preventDefault();
            };
        });
});

Which shows a sub-level menu once the top level is clicked. An example of the html structure is;

 <li><a href="#">mortgages</a>
                <!-- SUBMENU START -->
                <ul>
                    <li><a href="first-time-buyers.php">first time buyers</a></li>
                    <li><a href="moving-home.php">moving home</a></li>
                    <li><a href="remortgaging.php">remortgaging</a></li>
                    <li><a href="buy-to-let.php">buy to let</a></li>
                    <li><a href="self-build.php">self build</a></li>
                    <li><a href="commercial.php">commercial</a></li>
                    <li><a href="mortgage-search.php">mortgage search</a></li>
                    <li><a href="http://www.quote-conveyancing.co.uk/GetQuote.aspx?int=47495349">conveyancing quote</a></li>
                </ul>
                <!-- SUBMENU END -->
            </li>

This works great on desktops, but on iPhone/ iPad etc it doesn't work. Which after searching online, I realise this is because of these devices treating the first press as a hover.

The thing is though, I've tried a few of the common suggestions without luck. I've tried;

Adding cursor:pointer to the css and experimenting with touchstart after the click.

Is there anything else someone can suggest trying?

EDIT: Think I'm getting closer. I've changed the script ever so slightly (edited above) and now if you hold down the menu item until the iPhone pops up the message asking how you want to open the page, underneath the sub-menu appears. Then once it has appears, clicking the top menu works seamlessly.

Does anyone have any ideas as to why the initial click isn't working correctly?

hoops78
  • 37
  • 9

1 Answers1

0

All mobiles doesn't have a click event. You have to use jquery mobile or something like this. On mobiles is using touch instead of click. There are a lot of libraries that where find that is mobile than transform click to touch. You can do it by yourself. Just find if exists touch event and than use touch

Good luck

Alexxander.Gor
  • 48
  • 5