jQuery下拉菜单真的很诡异

我正在用jquery制作一个下拉菜单（其中一些代码是从某人的教程中借来的，虽然我忘了是谁......）。当我使用下拉菜单时，它的上下滑动速度非常快，我无法弄清楚。你怎么看？jQuery下拉菜单真的很诡异

HTML

<div id="nav"> 
    <ul class="topnav"> 
    <li><a class="selected" href="#" title="home">home</a></li> 
    <li><a href="events/" title="events calendar">events</a></li> 
    <li><a href="photos/" title="photo gallery">photos</a></li> 
    <li><a href="staff/" title="faculty">staff</a> 
<ul class="subnav"> 
    <li><a href="#">Luke</a></li> 
    <li><a href="#">Darth Vader</a></li> 
    <li><a href="#">Princess Leia</a></li> 
    <li><a href="#">Jabba the Hutt</a></li> 
</ul> 
</li> 
<li><a href="contact/" title="contact">contact</a></li>

jQuery的 $（文件）。就绪（函数（）{$ （ “ul.subnav”）。父（）.hover（函数（）{

$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on hover... 

$(this).parent() .hover(function() { 
}, function(){ 
    $(this).parent().find("ul.subnav").slideUp('slow'); 
}); 
$(this).parent().find("ul.subnav") .hover(function() { 
}, function(){ 
    $(this).parent().find("ul.subnav").slideUp('slow'); 
}); 

}).hover(function() { 
    $(this).addClass("subhover"); 
}, function(){ 
    $(this).removeClass("subhover"); 
});

来源

2010-01-29 Matthew Westrik

你能告诉我subhover类的风格定义吗？做'幻灯片'或他们只是消失？ – 2010-01-29 18:08:27

您可以使用以毫秒为单位的速度而不是'慢'和'快'。试试slideUp（1000）（或2000-3000例如）。它应该滑得非常平滑。

来源

2010-01-29 17:59:21

这是一个更简单的1 lvl下拉式版本，对于更多关卡，只需复制和粘贴即可轻松修改。希望它可以帮助你

<script type="text/javascript"> 
$(document).ready(function(){ 

$('.menu-option').hover(mouse_in, mouse_out); 
function mouse_in(){ 
    $(' > div', this).slideDown("normal"); 
} 
function mouse_out(){ 
     $(' > div', this).slideUp("fast"); 
} 

}); 

</script> 
     <style type="text/css"> 
ul div 
{ 
    display: none; 
} 
div{ 
    display :table-cell; 
    position: absolute; 
} 
.menu-option{ 
    display: block; 
    float: left; 
    width: 120px; 

} 
.menu-option ul{ 
    z-index: 100; 
} 
</style> 


<ul> <li class="menu-option"> MENU 1 
      <div> 
       <ul> 
        <li>sub menu 1 1 </li> 
        <li>sub menu 1 2 </li> 
        <li>sub menu 1 3 </li> 
       </ul> 
      </div> </li> <li class="menu-option"> MENU 1  <div> 
       <ul> 
        <li>sub menu 1 1 </li> 
        <li>sub menu 1 2 </li> 
        <li>sub menu 1 3 </li> 
       </ul> 
      </div> </li> 
     <li class="menu-option"> MENU 1  <div> 
       <ul> 
        <li>sub menu 1 1 </li> 
        <li>sub menu 1 2 </li> 
        <li>sub menu 1 3 </li> 
       </ul> 
      </div> </li> 
     <li class="menu-option"> MENU 1  <div> 
       <ul> 
        <li>sub menu 1 1 </li> 
        <li>sub menu 1 2 </li> 
        <li>sub menu 1 3 </li> 
       </ul> 
      </div> </li> </ul>

来源

2010-01-29 18:37:12

jQuery下拉菜单真的很诡异

回答

相关问题