I've got a menu that does the basic <a> links and shows a sub menu of divs with nested <ul><li>'s and other text dynamically with css and javascript. I'm migrating it over to jquery, and have it all working perfectly except for one thing. I am trying to get the menu to jump back to the tab that corresponds to the current page upon mouseout of the menu's parent div.
My code is basically this: <div id="menuholder"> <div id="menu"> <div id="toptabs"> <a.. <a.. <a.. </div> <div id="tabcontentcontainer"> <div id="menustuff... <div id="menustuff... <div id="menustuff... </div> </div> </div> Each "toptabs a" is binded (bound?) with a mouseover to show a corresponding menu div. All that works fine. What I'm not getting though, and am completely stumped about, is stopping the mouseout event from triggering on the child div's and a's underneath the menu div. I've got it kind of working to stop all children and self, and just do mouseout on the parent div, which would be the menuholder div, but it doesn't fire all of the time, if at all... it sometimes works if i mouse over the edge very slowly. Here's my code... maybe someone can shed some light on either stopping the child mouseover binding or triggering the mouseout on the parent smoother. (var currenttab is defined in the head by php) <script>var currenttab = '$tabtitle';</script> $(document).ready(function(){ expandmenu(currenttab); $("#menu") .parent().mouseout(function(e){expandmenu(currenttab);}) .children().andSelf().mouseout(function(e){return false;}); $("#toptabs > a").each(function() { var rel = $(this).attr("rel"); $(this).mouseover(function(){ expandmenu(rel); }); }); }); function expandmenu(tabid){ $("#toptabs:visible",function(){ $("#toptabs > [EMAIL PROTECTED]'"+tabid +"']").addClass("current").siblings("a.current").removeClass(); $("#"+tabid).show().siblings("div:visible").hide(); }); }