I'm looking to build a toggle menu using jQuery. I have the toggle feature working but for some reason my if statement isn't working. Basically I need to check to see if the list item has any children (sub menu items) and if so then toggle them open/closed on click preventing the default click-through action, and if not then allow the default click-through action.

<ul id="menu">
	<li><a href="#">What's new?</a>
			<li><a href="#">Weekly specials</a></li>
			<li><a href="#">Last night's pics!</a></li>
			<li><a href="#">Users' comments</a></li>
	<li><a href="/test.html">Member extras</a></li>
	<li><a href="#">About Us</a>
			<li><a href="#">Privacy Statement</a></li>
			<li><a href="#">Terms and Conditions</a></li>
			<li><a href="#">Contact Us</a></li>
$(document).ready(function() {
	// Hide the sub menu items first
	$('#menu > li > ul').hide();

	// Add the toggle & prevent default action only if there are children
	if ( $('#menu > li').has('ul').length ) {
		$('#menu > li').toggle(function() {
		}, function() {
		return false; // Prevent default action
The toggle currently works but the click-through doesn't. By this I mean if you click the menu item which doesn't have any children it should go to test.html but doesn't. Also clicking on each of the children doesn't send through to the relevant page (hashtag).

Any help or suggestions on how best to achieve it are very welcome.