I guess my problem needs more explanation. I am trying to get my drop down menu to function correctly on the ipad. I have top level menu items and sub menu items. When I tap the top level, the sub menu drops down, which is correct. Then when I tap one off the sub menu items, my html page loads inside my index.html (#!affordable-holidays.html). The problem is that the sub level drop down does not disappear when the html loads dynamically. So once I have tapped a parent item, the sub menu is there forever.

I thought that having some javascript at the top of the dynamically loaded html to hide the ul would work.

I am not sure of the correct terminology of how the page loads as this was a purchased template. For an example, mysite would be the index, and then when I go to another page it is mysite#!second-page.html

How would I hide a ul in a menu when the page loads? This is my html

<li><a href="#">Tester</a>
    <ul class="menu-hide">
       <li ><a href="#!pay-as-you-go.html"><span class="title">PAY AS YOU GO</span></a></li>
       <li ><a href="#!affordable-holidays.html"><span class="title">AFFORDABLE HOLIDAYS ALWAYS</span></a></li>
       <li ><a href="#!how-points-work.html"><span class="title">HOW POINTS WORK</span></a></li>
       <li ><a href="#!more-than-a-room.html"><span class="title">MORE THAN A ROOM</span></a></li>
    </ul>
</li>

This is the javascript I have found that is close to what I want:

<script type="text/javascript">$("div.menu-hide").hide()</script>

But I can't seem to target ul.menu-hide. I have tried this

<script type="text/javascript">$("ul.menu-hide").hide()</script>

I guess my problem needs more explanation. I am trying to get my drop down menu to function correctly on the ipad. I have top level menu items and sub menu items. When I tap the top level, the sub menu drops down, which is correct. Then when I tap one off the sub menu items, my html page loads inside my index.html (#!affordable-holidays.html). The problem is that the sub level drop down does not disappear when the html loads dynamically. So once I have tapped a parent item, the sub menu is there forever.

I thought that having some javascript at the top of the dynamically loaded html to hide the ul would work.

I am not sure of the correct terminology of how the page loads as this was a purchased template. For an example, mysite. would be the index, and then when I go to another page it is mysite.#!second-page.html

How would I hide a ul in a menu when the page loads? This is my html

<li><a href="#">Tester</a>
    <ul class="menu-hide">
       <li ><a href="#!pay-as-you-go.html"><span class="title">PAY AS YOU GO</span></a></li>
       <li ><a href="#!affordable-holidays.html"><span class="title">AFFORDABLE HOLIDAYS ALWAYS</span></a></li>
       <li ><a href="#!how-points-work.html"><span class="title">HOW POINTS WORK</span></a></li>
       <li ><a href="#!more-than-a-room.html"><span class="title">MORE THAN A ROOM</span></a></li>
    </ul>
</li>

This is the javascript I have found that is close to what I want:

<script type="text/javascript">$("div.menu-hide").hide()</script>

But I can't seem to target ul.menu-hide. I have tried this

<script type="text/javascript">$("ul.menu-hide").hide()</script>

• javascript
• jquery
• menu
• hide

• 2 Why don't you hide it via your stylesheet and then reveal it on demand? Could save you a FOUC. – m90 Commented Sep 25, 2012 at 11:30
• Did you tried after the dom loaded.i.e $(document).ready(function() { }) and i agree with m90 – Apurv Commented Sep 25, 2012 at 11:30
• 1 @m90 - If it's going to be revealed via JS it is (often) better to hide via JS so that in browsers with JS disabled the page is still usable... – nnnnnn Commented Sep 25, 2012 at 11:32

3 Answers 3

You appear to be missing your document.ready call

<script type="text/javascript">$(document).ready(function(){$("ul.menu-hide").hide()});</script>

also ensure that the link to your jQuery library is declared before your other javascript

http://api.jquery./ready/

try this

<script type="text/javascript">
  $(window).load(function () {

   $("div.menu-hide").hide()
  })
</script>

you can also use the

 $(window).ready(function () {

       $("div.menu-hide").hide()
      })

but the difference is that The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet.

The window load event executes a bit later when the plete page is fully loaded, including all frames, objects and images.

Good Read

$(document).ready vs. $(window).load

Hiding an HTML element on page load via JavaScript will result in the element producing a flickering effect when it is displayed and then hidden.

I would hide the element with your css file, and then show via JavaScript.

css code:

.menu-hide{ display: none; }

jQuery show code:

$(function(){
    $('.menu-hide').show();
});