jQuery overriding the link function on certain browsers
[size=18]Hi everyone, I'm relatively new to jQuery and have a problem with an expandable menu I have created for a new Wordpress theme.
With my expandable menu I am simply (slide)toggling the children <ul> by clicking the parent <li>. This should work fine but jQuery is overiding the default event for the anchors in the children resulting in me having a nice expandable menu that animates well but with its links disabled.
As far as I can tell this should work as I am targeting one level of anchor beneath the parent and not any other more deeply nested children.
The problem only applies to the followning browsers - Firefox 3.5, Safari 4, Chrome and ie 8.
It works fine in ie 6 and 7, Firefox 3 and Opera 9.
the jQuery is as follows:
-
$(document).ready(function(){
$('.expandable ul.children').hide();
$(".expandable > .cat-item a").click(function(){
$(this).next("ul.children") .slideToggle(500);
return false;
});
});
the html structure is as follows:
-
<div id="news_content">
<div id="news_leftbar" class="bg_white">
<h2>Submenu</h2>
<div id="submenu" class="bg_white">
<ul class="submenu_list expandable">
<li class="cat-item cat-item-26"><a>Anchor 1</a>
<ul class='children'>
<li class="cat-item cat-item-46"><a>Anchor 2</a></li>
<li class="cat-item cat-item-92"><a>Anchor 3</a></li>
<li class="cat-item cat-item-47"><a>Hotels</a></li>
</ul>
</li>
Any help would be greatly appreciated as this is wrecking my head.
I left the anchor details (href, title and so on) out just to make the html code a little easier to scan