我有一个导航菜单,最后一个li
包含一个嵌套的ul
来显示下拉菜单。我想要做的是在父li的悬停时显示嵌套菜单,并在您从菜单中悬停时隐藏。我现在面临的问题是,只要您尝试鼠标进入子菜单,菜单就会开始出现故障。我假设这是因为子菜单的绝对位置。我该如何解决这个问题?
$(function() {
$('li.has-sub')
.mouseover(function() {
$(this).find('ul').slideDown();
})
.mouseout(function() {
$(this).find('ul').slideUp();
});
});
ul {
list-style-type:none;
padding:0 30px;
}
ul.nav {
border:1px solid black;
}
ul.nav > li {
display:inline-block;
line-height:50px;
margin-left:30px;
}
ul.nav > li:first-child {
margin-left:0;
}
ul.nav > li > ul {
display:none;
position:absolute;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li class="has-sub">
Link Four
<ul>
<li>Sub Link One</li>
<li>Sub Link Two</li>
<li>Sub Link Three</li>
</ul>
</li>
</ul>
答案 0 :(得分:1)
您错过了.stop()
方法:
$(function() {
$('li.has-sub').mouseover(function() {
$(this).find('ul').stop().slideDown();
})
.mouseout(function() {
$(this).find('ul').stop().slideUp();
});
});
ul {
list-style-type:none;
padding:0 30px;
}
ul.nav {
border:1px solid black;
}
ul.nav > li {
display:inline-block;
line-height:50px;
margin-left:30px;
}
ul.nav > li:first-child {
margin-left:0;
}
ul.nav > li > ul {
display:none;
position:absolute;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
<li class="has-sub">
Link Four
<ul>
<li>Sub Link One</li>
<li>Sub Link Two</li>
<li>Sub Link Three</li>
</ul>
</li>
</ul>