javascript - 下拉菜单不断上下移动

Question

这是我的功能:

function dropmenu() {
    $(".dropdownitem").show('slow');
}
function hidemenu() {
    $(".dropdownitem").hide('slow');
}

这是我的下拉菜单:

<div id="dropdown" class="ns" onmouseover="dropmenu()" onmouseout="hidemenu()">
    <p id="dropper">Shortcut Menu</p>
    <p class="dropdownitem">Shortcut menu item</p>
    <p class="dropdownitem">Something</p>
    <p class="dropdownitem">Seomthing else</p>
    <p class="dropdownitem">Test menu item</p>
    <p class="dropdownitem">More testing</p>
    <p class="dropdownitem">Stuff</p>
    <p class="dropdownitem">More stuff</p>
</div>

问题是，当我将鼠标悬停在快捷菜单上并移出时，它会不断上下、上下、上下、......

问题是什么？

Answer 1

elclanrs 的答案将解决弹跳问题，另一个解决方案是将所有内容放在应该下拉的 div 中

<div id="dropdown" class="ns" onmouseover="dropmenu()" onmouseout="hidemenu()">
<div class="dropdownshow">
  <p id="dropper">Shortcut Menu</p>
  <p class="dropdownitem">Shortcut menu item</p>
  <p class="dropdownitem">Something</p>
  <p class="dropdownitem">Seomthing else</p>
  <p class="dropdownitem">Test menu item</p>
  <p class="dropdownitem">More testing</p>
  <p class="dropdownitem">Stuff</p>
  <p class="dropdownitem">More stuff</p>
</div>
</div>

然后显示整个下拉 div

function dropmenu() {
$(".dropdownshow").show('slow');
 }

或

   $(document).on("mouseover", "div.overout" , function() {
   $(".dropdownshow").show('slow');    
     }).mouseout(function(){
        $(".dropdownshow").hide('slow');
     });

在您同时将动画应用于 7 个单独的元素并导致弹跳之前，这只适用于 1