jQuery dropdown is really jumpy

Question

Я создаю выпадающее меню с 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 $ (документ) .ready (функция() { $ ("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"); 
}); 

Answer 1

Вы можете использовать скорость в миллисекундах вместо этого «медленный» и «быстрый». Попробуйте slideUp (1000) (например, 2000-3000). Он должен скользить вверх очень гладко.

Answer 2

Вот более простая версия выпадающего списка 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>