Question

UPDATE: Fri 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>

I’ve just tried the above code via the answered suggestion of calling on tap within the event handler. It still doesn’t allow Tap > Drop-down > Double Tap > Visit Parent Link as the demo reference link below renders. Am I inserting the tap event in the wrong place? On my Android HTC Incredible 2, the parent link remains a standard link navigating to that page without the drop-down appearing?

I’m also loading this in the head: http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js

---

Original Question:

I have a website that I’m very close to publishing.

I have drop-down menus implemented across coded like:

<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>

They work fine on Desktop, OK (But still pretty bad on iOS), and absolutely terrible on Android and everywhere else on mobile.

I want this: http://suan.github.com/make_dropdown/demo.html

But I really don’t want to recode all of my drop-downs. Could anyone suggest a code tweak that could allow my drop-downs to function on tap rather then on hover for mobile as the sample above??

Answer 1

you can use jQuery Mobile tap event:

$('.navLink').bind('tap', function(){
   rolloverMenu(1, 'mainMenu');
})