Some ideas...
Firstly, if you return false from any event handler it will prevent default
action and, more importantly, event bubbling. For example, if you had
<element A><element B>...</element B></elment A> and you put mouseouts on
both A and B, if the mouseout on B did NOT return false (or take some other
measure to prevent bubbling/propagation) then the mouseout on A would also
be triggered.
So you probably need to add a 'return false;' to the end of your expandmenu
function.
Secondly, your script ...
$("#menu")
.parent().mouseout(function(e){expandmenu(currenttab);})
.children().andSelf().mouseout(function(e){return false;});
...does the following:
- selects #menu [$()]
- changes the selection to #menuholder [parent()]
- applies 'expandmenu' mouseout to #menuholder [mouseout()]
- changes the selection to #menu [children()]
- adds #menuholder to the selection [andSelf()]
- applies 'return false' mouseout to #menu and #menuholder [mouseout()]
resulting in 2 mouseouts on #menuholder ('expandmenu' and 'return false')
and one on #menu ('return false').
I'm not sure that that is what you intended?
You might want to try just applying the mouseout to #menuholder...
$("#menuholder").mouseout(function(e){expandmenu(currenttab);})
...assuming that expandmenu now returns false?
(completely untested BTW!)
Brandon-52 wrote:
>
>
> I've got a menu that does the basic 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();
> });
> }
>
>
>
--
View this message in context:
http://www.nabble.com/Problem-with-binding-mouseout-to-only-parent-div-tf4561015s27240.html#a13034516
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
