1

構築中のサイトのドロップダウン メニューに CSS を使用しています。親タブにカーソルを合わせると、CSS3 の遷移プロパティを使用してドロップダウン メニューがフェードインします。私が抱えている問題は、親タブが別のページにリンクしているため、iPad で親タブをタップすると、ドロップダウン メニューが表示されずにそのページに移動することです。これにより、ユーザビリティの問題が発生します。

最初のタップでドロップダウンが表示され、2 回目のタップで親ページに移動する方法はありますか?

メニューを表示するために使用しているHTMLは次のとおりです。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="http://www.apple.com">Team</a>
      <ul>
        <li><a href="http://www.apple.com">Our Workers</a></li>
        <li><a href="http://www.apple.com">Join Us</a></li>
      </ul>
     </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

そして、ここに jsFiddle リンクがあります: http://jsfiddle.net/A64QU/197/

よろしくお願いします。</p>

4

2 に答える 2

2

最初のタップでメニューが呼び出され、2 回目のタップで親ページが呼び出されるデザインで、正しい軌道に乗っています。これは、ユーザーが常に「ホバー」できるとは限らないタッチスクリーンのみまたはタッチスクリーンのデバイスで機能し、メニュー上でカーソルを安定して保持することが困難なユーザーにとって重要であるため、ホバーしてメニューを表示するよりもお勧めしますこれが Mobile Safari、Internet Explorer、またはその他のブラウザーであるかどうかに関係なく、デザインします。

要求を実行するには、タグのクリック イベントを処理し<a>(たとえば、jQuery を使用: http://api.jquery.com/click/ )、そのようにメニューを非表示/表示します (jQuery のトグルまたは show/ を使用できます)。非表示にします。) 次に、メニューを表示するか非表示にするかを検討するようにコードを拡張して、タグのデフォルトの動作を防止してメニューを表示するかどうかを決定<a>します (たとえば、jQuery の preventDefault: http://api.jquery.com/event.preventDefault/ ) 。または、クリックのデフォルトの動作を許可します<a>: URL に移動し<a href>ます。

このアプローチでは、メニューが開いたら (そしてページの一部をブロックして) ユーザーがメニューを閉じる方法も提供する必要がある場合があることを考慮してください。多くの場合、これはドキュメント レベルでクリック ハンドラーを使用して行われます。

タッチ ホールドはユーザーにあまり知られていないため、代わりに実装することはお勧めしません。ユーザーテストの私の経験では、メニューのように見えるものであっても、ほとんどの人はこれを試みません。

于 2012-12-06T03:16:00.750 に答える
0

タッチ UI メタファには「ホバー」はありませんが、jQuery Mobile UI には touchhold と呼ばれる対応するイベントがあります。指がタッチ スクリーン上で一定時間 (500ms、700ms など) 押し下げられたままになっている場合に発生します。特定のキー、たとえば [a] キーを指で押したままにすると、iPad の仮想キーパッドでも同様のことが起こります。[a] の異形 (ウムラウト、アクセント付きなど) のポップアップが表示されます。

メニューを開くコードがタップ イベントではなくタッチホールドで呼び出されるように配線し、個々のメニュー項目がタップ イベントをリッスンするようにすることができます。必要な JavaScript を記述して Mobile Safari の touchevents をオーバーライドするか、この動作を実装する UI ライブラリをインストールする必要があります。

于 2012-06-12T16:52:13.493 に答える