Question

I have a set of nested DIVs that slidetoggle using jQuery as the user clicks on them.
Inside the innermost DIV there is an anchor tag with an HREF that should navigate somewhere.
The problem is that when I click on the link it slidetoggles just like the parent DIVs instead of navigating to the url.
If I right click the anchor and select open in new tab then that navigates fine.
Please can you spot whats going wrong?
Thanks

  <div class="pod"> 
    <li id='ThirdParty'> 
        <div class='block'> 
            <h1>ThirdParty</h1>
            <div class='systemHeader'> 
                <h2><span>Bobs shop</span></h2> 
                <div class='subSystems'>                     
                    <div class='subSystemHeader'> 
                        <h3><span>&nbsp;Gifts</span></h3> 
                        <div class='reports '> 
                            <p class='reports i1'> 
                                <a href='/Next.Whs.Web.MenuSystem/Default.aspx?id=470' title=''>Option 1</a></p> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </li> 
</div>

    $("div.subSystemHeader, div.subSystemHeader").click(function() { 
   $("> div", this).slideToggle(...); 
   return false; 
}); 

Answer 1

A few changes here, there’s no need to repeat the same selector, and check that the event didn’t come from an <a> tag, like this:

$("div.subSystemHeader").click(function(e) { 
  if(e.target.nodeName == 'A') return; //skip this handler, don't return false
  $("> div", this).slideToggle(...); 
  return false; 
});

You can test it here. If the event target was from the <a> (there are no children of it) then we just exit the handler, returning undefined, since we’re not explicitly returning false the click event will do it’s normal thing…going to the href.