Question

Im trying to make an animated list that when an item is clicked, a child UL toggles display and becomes visible. The problem is however, when the user then clicks a child LI within the newly visible List, the display is then toggled again as opposed to the link going to a new page…

My jQuery is…

//Product range expander
$('.product-range ul li a').click(function() {
  $(this).parents("li").find("ul").toggle('slow')
  return false;
});

Markup…

<ul>
<li>
   <a href="#">United Kingdom</a>
       <ul style="display: none;">
           <li><a href="page1.html">Product</a></li>
           <li><a href="page2.html">Product</a></li>
           <li><a href="page3.html">Page</a></li>
        </ul>
</li>
</ul>

Answer 1

Alter your selector so it only targets the first anchor using the CSS2 child selector which only selects direct descendants.

$('.product-range > ul > li > a').click(function(e) {
  $(this).parents("li").find("ul").toggle('slow')
  return false;
});

Your current selector applies your function to all a tags which are nested inside a li which is nested inside a ul tag regardless of depth.

Working example here: http://jsfiddle.net/P9k9w/9/