Forums

soap

Yooyoyoyoyo I've found jQuery pretty useful but I'm having a problem with mouse positions on target elements.

http://affluentpracticemarketing.com/ti ... stween.php

On that menu for instance, if you try to bring the mouse onto the dropdown menu "slideUp" event triggers and the drop down goes away. How do you achieve this?


$(document).ready(function () {
	$('a.home').mouseover(function () {
		$('ul.menu_body').slideDown('medium');
	});
	
	$('a.home').mouseout(function () {
		$('ul.menu_body').slideUp('medium');
	});			 
});

I basically want to be able to do something like:


if(e.targ != dropdown) {
run the slideUp function
}

Unless there's an easier way

Thanks!

Mr KiTT3N

Change


<ul id=\"menu\">
	<li><a href=\"#\" class=\"home\"><span></span></a></li>
	<li><a href=\"#\" class=\"about\"><span></span></a></li>
</ul>
<ul class=\"menu_body\">
    <li><a href=\"#\">About Us</a></li>
    <li><a href=\"#\">Portfolio</a></li>
    
    <li><a href=\"#\">Clients</a></li>
    <li><a href=\"#\">Blog</a></li>
    <li><a href=\"#\">Support Forums</a></li>
    
    <li><a href=\"#\">Gallery</a></li>
    <li><a href=\"#\">Contact Us</a></li>
</ul>

to


<ul id=\"menu\">
  <li><a href=\"#\" class=\"home\"><span></span></a>
    <ul class=\"menu_body\">
      <li><a href=\"#\">About Us</a></li>
      <li><a href=\"#\">Portfolio</a></li>
    
      <li><a href=\"#\">Clients</a></li>
      <li><a href=\"#\">Blog</a></li>
      <li><a href=\"#\">Support Forums</a></li>
    
      <li><a href=\"#\">Gallery</a></li>
      <li><a href=\"#\">Contact Us</a></li>
    </ul>
  </li>
  <li><a href=\"#\" class=\"about\"><span></span></a></li>
</ul>

if its nested then you can do something like


$('#menu li).hover(function(){
        $(this, 'ul').slideDown(500);
    },function(){
        $(this, 'ul').slideUp(500);
});

Its defiantly not tested... but you should get the idea

treehouse : what would you like to learn today?

Forums

e.targ equivalent