Question

This problem really had me confused for quite a while, and the solution ended up being forcing an older version of jQuery to be loaded from the Google CDN.

I had built a menu with this structure:

<ul>
<li class="top-nav">
<a href="#">Top Item One</a>
<ul class="sub-nav hidden">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
</ul>
</li>

<li class="top-nav">
<a href="#">Top Item Two</a>
<ul class="sub-nav hidden">
<li>Sub Item One</li>
<li>Sub Item Two</li>
<li>Sub Item Three</li>
</ul>
</li>

... etc ...

</ul>

I have a very simple toggle function, so that when the ‘top-nav’ is clicked, the sub-nav slides down and appears.

$('li.nav-top>a').toggle(function(){
    $(this).addClass('active');
    $(this).siblings('.nav-sub').slideDown(100);
}, function(){
    $(this).removeClass('active');
    $(this).siblings('.nav-sub').slideUp(100);
});

The incredibly confusing thing is, that with the latest version of jQuery, this code causes all of the top-nav list items to collapse and disappear, I have no idea why as it’s just a toggle and it isn’t even targeting the top level items!

(the site is http://www.sjofasting.no)

Answer 1

The classes in the selectors and the classes in the markup are not the same, toggle() is deprecated, and you should probably prevent the default action of the anchor to avoid scrolling to the top ?

$('li.top-nav > a').on('click', function(e){
    e.preventDefault();
    $(this).toggleClass('active')
           .next('.sub-nav').slideToggle(100);
});