次のスクリプトがあります
$(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();
};
});
});
トップレベルをクリックすると、サブレベルのメニューが表示されます。html 構造の例は次のとおりです。
<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>
これはデスクトップではうまく機能しますが、iPhone/iPad などでは機能しません。オンラインで検索した後、これはこれらのデバイスが最初のプレスをホバーとして扱うためであることがわかりました.
ただし、一般的な提案をいくつか試してみましたが、うまくいきませんでした。私はもう試した;
css に cursor:pointer を追加し、クリック後に touchstart を試します。
誰かが試してみることを提案できるものは他にありますか?
編集: 近づいていると思います。スクリプトを少し変更しました (上で編集)。iPhone がページを開く方法を尋ねるメッセージがポップアップするまでメニュー項目を押し続けると、サブメニューが表示されます。それが表示されたら、トップメニューをクリックするとシームレスに機能します。
最初のクリックが正しく機能しない理由について誰か考えがありますか?