Stopping a SlideUp When link is clicked

Question

So I have this vertical menu that slides down when you click on the parent item to display the children elements and when you click on a child element it takes you to the link.

My problem is that when you click on the link the whole submenu slides up because of the slideToggle function on it - how can I stop the slide up from happening only if a link is clicked?

My Menu:

<ul id="menu-top" class="menu">
    <li class="has-submenu">
        <a href="http://mywebsite.com/portfolio/">Portfolio</a>
        <ul class="sub-menu" style="display: none;">
            <li class="menu-item">
                <a href="http://mywebsite.com/book-i/">Book I</a>
            </li>
        </ul>
    </li>
    <li class="has-submenu">
        <a href="http://mywebsite.com/retouching/">Headshots</a>
        <ul class="sub-menu" style="display: none;">
            <li class="menu-item">
                <a href="http://mywebsite.com/men/">Men</a>
            </li>
        </ul>
    </li>
    <li class="regular-link">
        <a href="http://mywebsite.com/personal-work/">Personal Work</a>
    </li>
</ul>

JS:

jQuery('#menu-top').children().click(function(e){
    var $next = jQuery(this).find('.sub-menu');
    var $child =('.active-menu');
    $next.stop().slideToggle('slow').toggleClass('active-menu'); 
     jQuery(".sub-menu").not($next, $child).slideUp('slow').removeClass('active-menu');

});
jQuery('.has-submenu > a').click(function(e){
e.preventDefault();
});

Answer 1

Use stopPropagation to prevent the event from bubbling.

jQuery('.submenu a').click(function(e){

    e.stopPropagation();

});

Answer 2

To stop the slideToggle menu from sliding up when clicking the ul's children links, you can use the jquery function stopPropogation() on the click event of the link itself.

$(".shop-by-dept ul li a").click(function(e){
    e.stopPropagation();
});

This will prevent the slideToggle() action from sliding the menu up, while the browser loads the next page.