iPad悬停事件jQuery

Question

Im trying to create a false hover event for my site using jQuery...

I have created the following only all the child elements in my list now return false also as opposed to linking to the correct page...

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $("ul.sf-menu li.i").click(function(e) {
        e.preventDefault();
    });
}

Has anybody an idea on an alternative method that could work?

---

HTML

<ul class="sf-menu"> <li><a href="index.html">Home</a><li class="i"><a href="wedding-hire.html">Weddings</a>
            <ul>
                <li><a href="peel-suite.html">Peel Suite</a></li>
                <li><a href="the-hall.html">The Hall</a></li>
                <li><a href="the-grounds.html">The Grounds</a></li>
                <li><a href="food-and-drink.html">Food &amp; Drink</a></li>
                <li><a href="pricing.html">Pricing</a></li>
            </ul>
        </li>

Answer 1

well. without HTML its kind of hard to tell. But you are stopping the default behavior of the browser when the user clicks on the li (and therefor also its children, which I suppose is an anchor/link). you could check if its a link or an anchor on click and handle it differently;

$("ul.sf-menu li.i").click(function(e) {
    if (e.target.nodeName!=="A"){
        e.preventDefault();
        //do your hover code
    }
    else{
        //do nothing, because the user wants the link to load
    }
});

Answer 2

更改您的选择器，使其仅与列表点的第一级匹配，我也看不到类，因此您可能还需要从选择器中删除该类。

$("ul.sf-menu > li")