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下拉菜單真的很詭異

回答

相關問題