Question

I’m using the below code to show/hide a nav and its children. It is working as intended. When the nav shows, and I click on one of the child links, it closes, and then takes me to a new page.

 // swap classes for lower level nav
  jQuery('.toggle').click(function() {
  $(this).toggleClass('toggle');
  $(this).toggleClass('toggle_open');
 });

 jQuery('a.portfolio').click(function(e) {
  e.preventDefault();
 });

It doesn’t do this with Safari, but Chrome & Firefox display the behaviour above. When I watch what is happening when the inspector is open; I click on the parent link, the toggle class is applied, I click on a child link, and the toggle class gets swapped back.

How do I stop the nav from closing before it takes me to the requested page?

My markup (unconventional for a nav – i know):

<span class="toggle">
 <a href="portfolio/" class="level1 portfolio">Portfolio</a>
   <span>
     <a href="portfolio/item1/" class="first level2">item 1</a>
     <a href="portfolio/item2/" class="level2">item 2</a>
     <a href="portfolio/item3/" class="last level2">item 3</a>
   </span>   
</span>

Answer 1

You should add e.stopPropagation() to all <a>‘s click handler, and remove e. preventDefault() which will prevent you from going to a new page.

Try this code:

jQuery('.toggle').click(function() {
  $(this).toggleClass('toggle');
  $(this).toggleClass('toggle_open');
 });

 jQuery('.toggle a.level2').click(function(e) {
    e.stopPropagation();
 });