Can't get JS to target specific li

Question

I'm not a programmer. I can read and understand some code, and I can google for answers. But this one escapes me. I built a test page to try my hand at coding for mobile devices - http://www.stovebolt.com/testing2.html

At 800 pixels, the navigation stack on the left is hidden and replaced with a dropdown menu that uses a list structure with a hover function. This will work on mobile devices if the href for the parent li is #. However, you have to reload the page to get it to close the menu.

So I cast about for a solution and came across this: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

I'm using his DoubleTapToGo javascript, and it works, but it applies to all the elements not just the parent li. According to his page you just need to use the following to only have the parent require a double tap:

$( '#nav li:has(ul)' ).doubleTapToGo();

I'm not using the id #nav. I'm using the class .mobile, so I replaced #nav with .moblie. But you have to double tap ALL the links, not just the dropdown.

I've tried negating the function, but that didn't work. I tried changing to li:hasClass() and created a new class for that one li. Didn't work. How can I get the doubleclick to only work on the parent li? The code li:has(ul) should work, because there's only one sublist. But it doesn't.

I can't help but think I'm missing something very simple. Here's the code on my page, which I copied directly from the source of his webpage:

<script>
    $( function()
    {
            $( '.mobile li:hasClass('mobileParent')').DoubleTapToGo();
    });

This is the html for the mobile list:

<div class="mobile" role="navigation">
<ul>
<li><a href="<!--#echo var="DOCUMENT_URI" -->" aria-haspopup="true">Around the 'Bolt...</a>
<ul>
<li><a href="http://www.stovebolt.com/">Home</a></li>
<li><a href="http://www.stovebolt.com/search.html">Search</a></li>
<li><a href="http://www.stovebolt.com/ubbthreads/ubbthreads.php">Discussion Forums</a></li>
<li><a href="http://www.stovebolt.com/gallery">Gallery</a></li>
<li><a href="http://www.stovebolt.com/techtips/">Tech Tips</a></li>
<li><a href="http://www.stovebolt.com/links">Links</a></li>
<li><a href="http://www.stovebolt.com/events">Events</a></li>
<li><a href="http://www.stovebolt.com/ubbthreads/ubbthreads.php/category/3/Swap_Meet.html">Swap Meet</a></li>
<li><a href="http://www.stovebolt.com/faq/">FAQs</a></li>
<li><a href="http://www.stovebolt.com/features">Features</a></li>
<li><a href="http://www.cafepress.com/mystovebolt" target="_blank">Stovebolt Hoo-ya</a></li>
<li><a href="http://www.stovebolt.com/office">Stovebolt Office</a></li>
</ul>
</li>
</ul>
</div>

Answer 1

Please try this

$( function()
{
        $( '.mobile li.mobileParent').DoubleTapToGo();
});

But in you html there is no li with the class mobileParent . So $( '.mobile li.mobileParent').DoubleTapToGo(); wont work. Add that calss and then use this code.

Answer 2

This is how I solved the problem. I ripped out all the double-click stuff (since it was giving me errors), changed the link in the primary LI to "#" and added another LI to the dropdown menu to close it:

<li><a href="#" aria-haspopup="true">Around the 'Bolt...</a> <ul> <li><a href="<!--#echo var="DOCUMENT_URI" -->">Close this Menu</a></li>

That just left one problem. Apparently Apple tries to emulate the hover event, so it requires a double click on dropdown menu items. So I added this script to over come that: http://cssmenumaker.com/blog/solving-the-double-tap-issue-on-ios-devices