1

私は奇妙な問題に直面しています。jsを使用して、選択したドロップダウンフォーム要素からcssドロップダウンメニューを作成しました。そして、それはほとんどのブラウザでうまくいくようですが、iOSデバイスです。ドロップダウンdivにカーソルを合わせると、cssホバーイベントはiOSデバイスではトリガーされませんが、リスナーにアクションがない状態でイベントリスナーをドロップダウン要素に追加すると、ホバーイベントが機能し始めます。

編集するコードは次のとおりです：http：//codepen.io/kuldeepdaftary/pen/jKeDi

テストするには：http：//codepen.io/kuldeepdaftary/full/jKeDi

JSで次のスニペットにコメントしてみてください。

  $('.dropdown').click(function(){});

上記の部分にコメントしたら！Cssホバーはiphone/ipadでは機能しなくなりますが、コメントを外すとすぐに正常に機能します。

クリックイベントリスター関数が空白なので！問題を解決するのは何なのかわかりません。

4

2 に答える 2

2

iOSデバイスにはホバーイベントはありません。まず、ドロップダウンを表示および非表示にするためのロジックを独自の関数に分離します。次に、ブラウザで使用できる機能に基づいてこれにアプローチする必要があります。

if ('ontouchstart' in document.documentElement) {
  $(".dropdown").click(hoverFunction);
} else {
  $(".dropdown").hover(hoverFunction);
}

CSSのみを使用してドロップダウン機能を実現できることは注目に値するかもしれません。その場合、ここに解決策があります。 タッチベースのデバイスのドロップダウンメニュー

于 2013-02-05T10:54:19.363 に答える
0

OP は、iOS での "touch to trigger :hover" の実装に対する実行可能なソリューションであることが判明しました。

私がほぼ同時に発見した別の方法は、ターゲットを a[href=trivial] でラップすることでした。ターゲットの :hover 疑似クラスは、iOS でのタッチ時により確実にトリガーされます。

于 2015-03-01T10:32:20.817 に答える