gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:13:06 26 4
gpt4 key购买 nike

A 使用 jquery 设计了一个两级菜单。当我将鼠标悬停在顶部菜单链接时,submenu 类名的 DIV 会向下滑动。当我将鼠标悬停在该 div 内时,会出现一个链接,类名为 subsubmenu 的第二级再次向下滑动并导致其父级 (submenu) 展开更多。

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

这是一个错误吗(在 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>

最佳答案

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

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

关于jquery - 父级 slideDown 中的子级 slideDown 溢出父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29692070/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com