父级幻灯片中的子幻灯片向下溢出父级

时间:2015-04-17 06:41:53

标签: jquery html css overflow slidedown

A使用jquery设计了一个两级菜单。当我将鼠标悬停在顶部菜单链接上时,按类名子菜单的DIV会向下滑动。在这个div中,当我悬停它时会有一个链接,类名为 subsubmenu 的第二个级别再次向下滑动并导致其父级(子菜单)扩展更多。 / p>

当您行动缓慢且正常时,此结构可正常工作。问题是,当我快速移动鼠标并退出并多次进入顶级菜单时,结构会变得永远!我的意思是子菜单的扩展将不再扩展其父级(子菜单),即使你再次行动缓慢而正常。

这是一个错误(在谷歌浏览器和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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

当涉及短时间内的许多动画,并且只应显示最后一个动画时,您可以使用.stop(true, true)不仅可以停止动画,还可以完成动画并清除动画队列。

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