javascript - jquery dropdown menu opens repeatedly upon hover -
i've got bit of problem jquery menu. works fine, if hover on buttons 3 or 4 times, menu expand 3 or 4 times repetitively, , can wait quit. can please tell me how stop this? here's javascript i'm using:
<script type="text/javascript"> $(function () { $('#dropmenu .level1 .submenu.submenu').hover(function() { $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); }, function() { $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).show(1000); $(this).find('ul.level2,.level3 li,.level4 li,.level5 li,.level6 li').stop(true, true).hide(1000); });}); </script>
any insight appreciated.
thanks
hey robert, hate when simple hover action unexpected results. on time i've developed few methods resolving flicking of elements.
assuming have menu structure so;
<div id="nav"> <ul> <li> <a href="...">home</a> <ul> <li><a href="...">new products</a></li> <li><a href="...">all products</a></li> <li><a href="...">specials</a></li> <li><a href="...">search</a> <ul> <li><a href="...">site</a></li> </ul> </li> </ul> </li> </ul> </div>
css this;
<style> #nav ul li ul{ display:none; } </style>
jquery this;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> $("#nav ul li").each(function(){ $(this).mouseenter(function(){ $(this).find("ul:first").show(); }).mouseleave(function(){ $(this).find("ul:first").hide(); }); }) </script>
notice, i'm using .mouseenter()
, .mouseexit()
instead of .hover()
in example.
why .hover()
doesn't expect in example? hover works on single element, when hover on within element, it's new element.
a great example on jquery api documentation
i hope clears hover issues.
Comments
Post a Comment