父级 slideDown 中的子级 slideDown 溢出父级

Question

A 使用 jquery 设计了一个两级菜单。当我将鼠标悬停在顶部菜单 link 时， 子菜单 的 class 名称的 DIV 会向下滑动。在这个 div 里面有一个 link 当我将它悬停时，具有 class 名称的 subsubmenu 的第二级再次向下滑动并导致其父级（子菜单）展开更多。

当你行动缓慢而正常时，这种结构很有效。问题是，当我多次快速移动鼠标并退出并进入顶级菜单时，结构会被破坏永远！我的意思是子子菜单的扩展将不再扩展其父级（子菜单），即使您再次行动缓慢且正常。

这是一个错误吗（在 google chrome 和 firefox 中！）？或者您有什么结构上的修改建议吗？

$(".menuholder").on("mouseenter",function(){
var submenuid=$(this).attr("id").replace("menu","");
$(this).children("a").addClass("hover");
$(".submenu").stop().hide();
$("#submenu"+submenuid).stop().slideDown();
});

$(".menuholder").on("mouseleave",function(){
var submenuid=$(this).attr("id").replace("menu","");
$(this).children("a").removeClass("hover");
$(".submenu").stop().hide();
})

$(".subholder").on("mouseenter",function(){
$(".subsubmenu").stop().slideUp();
$(this).find(".subsubmenu").stop().slideDown();
});

$(".subholder").on("mouseleave",function(){
$(this).find(".subsubmenu").stop().slideUp();
})

.menu{
 color:#ffffff;
 display:inline-block;
 padding-right:8px;
 padding-left:8px;
 background:#dfa800;
 white-space:nowrap;
 height:35px;
 line-height:35px;
 margin-left:5px;;
 border-top-right-radius:5px;
 border-top-left-radius:5px;
}
.menu:hover,.menu.hover{
 color:#000000;
    background:#eeeeee;
}
.submenu{
 width:200px;
 position:absolute;
 top:35px;
 background:#eeeeee;
 left:20px;
 z-index:900;
 display:none;
 box-shadow:0 10px 10px #000000;
}

.subholder{
 display:inline-block;white-space:nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu7" class="menuholder" style="display: inline-block">
  <a class="menu">test</a>
  <div id="submenu7" class="submenu">
   <table style="width:100%">
    <tr>
     <td valign="top" width="100%">
      <div class="subholder">
       <ul>
        <li>test</li>
       </ul>
       <div class="subsubmenu" style="display: none;">
        <ul>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
        </ul>
       </div>
      </div>
     </td>
    </tr>
   </table>
  </div>
 </div>

Answer 1

当短时间内有很多动画，而只显示最后一个时，您可以使用.stop(true, true)不仅可以停止动画，还可以完成它并清除动画队列。

它在某些情况下确实有帮助，当许多动画（中途停止）可能导致奇怪的行为时。

父级 slideDown 中的子级 slideDown 溢出父级

children slideDown inside parent slideDown overflows the parent

html

css

jquery

overflow

slidedown