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

Answer 2

停止

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