jquery Hover funktioniert nicht wie erwartet

Question

Ich habe ein Nav-Menü mit einem Subnav. Die Unternavigation sollte zeigen, wenn die Eltern li auf schwebte ist, aber ich bin nicht die erwarteten Ergebnisse zu erzielen ...

html

<div class="nav <%= cssClass %>"> 
    <ul>  
     <li><a runat="server" href="http://www.synergisticsinstitute.com/">Welcome</a></li> 
     <li> 
      <a runat="server" href="http://www.synergisticsinstitute.com/bhot-for-men/">BHOT&trade; For Men</a> 
      <div class="subnav" style="display:none;"> 
       <a href="http://www.synergisticsinstitute.com/bhot-for-men/research/">BHOT&trade; Research</a> 
       <a href="http://www.synergisticsinstitute.com/bhot-for-men/faq/">FAQ for Men</a> 
      </div> 
     </li> 
     <li> 
      <a runat="server" class="bhot-for-women" href="http://www.synergisticsinstitute.com/bhot-for-women/">BHOT&trade; For Women</a> 
      <div class="subnav" style="display:none;"> 
       <a href="http://www.synergisticsinstitute.com/bhot-for-women/faq/">FAQ for Women</a> 
      </div> 
     </li> 
     <li><a runat="server" href="http://www.synergisticsinstitute.com/hcg-weight-loss/">hCG Weight Loss</a></li> 
     <li><a runat="server" href="http://www.synergisticsinstitute.com/nutrition/">Nutrition</a></li> 
     <li><a runat="server" href="http://www.synergisticsinstitute.com/supplements/">Supplements</a></li> 
     <li><a runat="server" href="http://www.synergisticsinstitute.com/medical-director/">Meet Our Medical Director</a></li> 
     <li><a runat="server" href="http://www.synergisticsinstitute.com/contact-us/">Contact Us</a></li> 
    </ul> 
</div> 

jquery

$(document).ready(function() { 
    var $nav = $('.nav'); 
    $nav.find('div.subnav').each(function() { 
     $(this).parent().hover(navMouseIn(this), navMouseOut(this)); 
    }); 
}); 

function navMouseIn(elem) { 
    $(elem).show(); 
} 

function navMouseOut(elem) { 
    $(elem).hide(); 
} 

Answer 1

http://jsfiddle.net/8btwV/

$(document).ready(function() { 
    $('.nav div.subnav').each(function() { 
     var subnav = $(this); 
     subnav.parent().hover(function() {navMouseIn(subnav);}, 
           function() {navMouseOut(subnav);}); 
    }); 
}); 

function navMouseIn(subnav) { 
    subnav.show(); 
} 

function navMouseOut(subnav) { 
    subnav.hide(); 
}​ 

Sie wurden eine unnötige .find verwendet, die nur Ihre Wähler verengt sich (auch .filter sehen), indem sie in das ausgewählte Element suchen. Noch wichtiger ist, dass Sie diese Funktionsrückrufe in einen asynchronen Rückruf versetzen müssen, damit sie zu einem späteren Zeitpunkt aufgerufen werden können - in dem Moment, in dem Ihr Code sie sofort aufruft. Außerdem bezieht sich dies nicht mehr auf das jQuery-Element in diesen Callbacks. Daher habe ich subnav als Bereichsvariable verwendet.

Answer 2

Sie sollten die Funktion Objekt übergeben als Callback, während Sie die navMouseIn und navMouseOut aufrufen. Grundsätzlich übergeben Sie ihren Rückgabewert als Handler. Der Code sollte wie folgt aussehen:

$(document).ready(function() { 
    var $nav = $('.nav'); 
    $nav.find('div.subnav').each(function() { 
     $(this).parent().hover(navMouseIn, navMouseOut); 
    }); 
}); 

function navMouseIn() { 
    $("div.subnav:first", this).show(); 
} 

function navMouseOut() { 
    $("div.subnav:first", this).hide(); 
}