Question

I have a side vertical menu, with sub pages (sub <ul>). I have a very nice jQuery slideToggle feature which expands the menu to show the sub pages. Though when this jQuery is targeting the menu, non of the sub page’s links work. When I turn the JS off it works fine. I have been playing for the last hour or so. Any help would be appreciated.

// SIDE BAR MENU EXPAND

$('#left-menu ul li').click(function() {
    $(this).children("ul").slideToggle("slow");
    return false; });

The HTML:

<div id="left-menu">
                                                            <!-- first level sub-sections -->

<ul>
<li class="active"><a href=">Leather Goods &#187;</a>
   <ul>
       <li><a href="">Handbags</a></li>
       <li><a href="">Laptop &amp; Briefcase</a></li>
       <li><a href="">Pen Cases </a></li>
   </ul>
</li>

<li><a href="">Stationery</a>
    <ul>
       <li><a href="">A4</a></li>
       <li><a href="">A5</a></li>
       <li><a href="">A6</a></li>                                                                    
    </ul>
</li>
                                                                                                <li><a href="">Writing Instruments</a>
    <ul>
       <li><a href="">Accessories</a></li>
       <li><a href="">Ballpoint Pens</a></li>
    </ul>
</li>
</ul>
                                                                        </div>      

Answer 1

The problem is because the return false; is preventing the usual link click behaviour for all your A tags, not just those in the headings. Try this:

HTML

<li class="active"><a href="" class="heading">Leather Goods &#187;</a>
   <ul>
       <li><a href="">Handbags</a></li>
       <li><a href="">Laptop &amp; Briefcase</a></li>
       <li><a href="">Pen Cases </a></li>
   </ul>
</li>

JS

$('#left-menu ul li a').click(function(e) {
    if ($(this).hasClass("heading")) {
        e.preventDefault();
    }

    $(this).next("ul").slideToggle("slow");
});

Fiddle to prove the theory