菜单jQuery的上下多次

我有这样的菜单与jQuery菜单jQuery的上下多次

$(document).ready(function() { 
      $(".submenu").slideUp(100, function(){ 
       $(".menu_item").css({overflow:'visible'}) 
      }); 
      $(".submenu").css({display:'none'}); 
      $(".menu_item").hover(function({ 
       $(this).stop(true, true).animate({ 
        marginTop: "0px" 
       }, 300, function() { 
        //if($(".submenu", this).queue().length < 2) 
        $(".submenu", this).slideDown(300); 
       }); 
      }, function() { 
       $(".submenu", this).stop(true, true).slideUp(300, function() { 
        $(this).parent().animate({ 
         marginTop: "20px" 
        }, 300); 
       }); 
      }); 
    });

和HTML

<div id="navigation"> 

      <a href="" class="single">Home</a> 

      <div class="menu_item">Azienda 
      <div class="submenu"> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
      </div> 
     </div> 

     <div class="menu_item">Servizi 
      <div class="submenu"> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
      </div> 
     </div> 

    </div><!--end navigation-->

动画，但：

有一个小 “错误” 这个问题，如果您不止一次将鼠标悬停在下拉菜单上，该菜单将继续沿着您悬停的次数上下移动。

来源

2011-02-04 Pierluigi Ballatore

嘿，这似乎好的工作对我来说：

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
     $(".submenu").slideUp(100, function() { 
      $(".menu_item").css({overflow:'visible'}) 
     }); 
     $(".submenu").css({display:'none'}); 
     $(".menu_item").hover(function(){ 
      $(this).stop().animate({ 
       marginTop: "0px" 
      }, 300, function() { 
       $(".submenu", this).stop().slideDown(300); 
      }); 
     }, function() { 
      $(".submenu", this).stop().slideUp(300, function() { 
       $(this).parent().stop().animate({ 
        marginTop: "20px" 
       }, 300); 
      }); 
     } 
    ); 

}); 
</script> 
</head> 
<body> 
<div id="navigation"> 

      <a href="" class="single">Home</a> 

      <div class="menu_item">Azienda 
      <div class="submenu"> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
      </div> 
     </div> 

     <div class="menu_item">Servizi 
      <div class="submenu"> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
       <a href="#">Link</a> 
      </div> 
     </div> 

    </div><!--end navigation--> 
</body> 
</html>

来源

2011-02-04 11:02:04

没有进入具体的代码，你可以设置一些“状态变量”，像（伪代码）：

var is_open = false; 
if (mouseover && !is_open) { 
    // start_animation and set is_open = true when_finished 
} 
// Same for closing 
....

来源

2011-02-04 10:54:32 Don

菜单jQuery的上下多次

回答

相关问题