1

更新:金 9:12:13 AM

<div id="containerdropdown">
  <a class="mainNav navLink" href="" id="mainLink" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">ALL CATEGORIES</a>
  <div class="rolloverMenu" id="mainMenu" style="display: none;" onmouseover="rolloverMenu(1, 'mainMenu');$('.navLink').on('tap', function(){
   rolloverMenu(1, 'mainMenu');})" onmouseout="rolloverMenu(0, 'mainMenu');">

    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a>

  </div></div>

イベントハンドラー内でタップを呼び出すという回答された提案を介して、上記のコードを試しました。下のデモ参照リンクがレンダリングされるため、タップ > ドロップダウン > ダブルタップ > 親リンクにアクセスすることはまだ許可されていません。間違った場所にタップ イベントを挿入していませんか? 私の Android HTC Incredible 2 では、親リンクはドロップダウンが表示されずにそのページに移動する標準リンクのままですか?

これも頭にロードしています：http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js

元の質問:

私は公開間近のウェブサイトを持っています。

次のようなコード全体に実装されたドロップダウンメニューがあります。

<div id="containerdropdown">
  <a class="mainNav navLink" href="" id="mainLink" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">ALL CATEGORIES</a>
  <div class="rolloverMenu" id="mainMenu" style="display: none;" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a><br />
    <a href="#">Test</a>

それらはデスクトップでは問題なく動作し、OK (ただし、iOS ではまだかなり悪い) であり、Android やその他のモバイルではまったくひどいものです。

これが欲しい: http://suan.github.com/make_dropdown/demo.html

しかし、すべてのドロップダウンを再コーディングしたくありません。上記のサンプルのように、ドロップダウンがモバイルのホバーではなくタップで機能できるようにするコードの微調整を誰かが提案できますか??

4

3 に答える 3

1

イベントを使用できますjQuery Mobile tap：

$('.navLink').bind('tap', function(){
   rolloverMenu(1, 'mainMenu');
})
于 2012-05-10T21:07:00.773 に答える
0 
.rolloverMenu { display:none; } /* You should hide this with CSS instead of inline; */
.navLink:hover + .rolloverMenu,
.navLink:focus + .rolloverMenu { display:block; }

キーボードナビゲーションでも機能するはずです（ただし、セカンダリメニューへのタブ移動は難しいでしょう）。ホバーだけでなくフォーカスにもJSバインドしたい場合があります。

于 2012-05-10T21:05:26.527 に答える