我有这个HTML代码:
<ul class="navigation-links">
<li class="link-item">
<img src="images/new-menu/menu-item_04.png" width="150" height="41" alt="" />
<div style="display: none" class="sub-menu">
<div class="sub-col">
<img src="images/new-menu/home.png" width="46" height="14" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="sub-col">
<img src="images/new-menu/home.png" width="46" height="14" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="sub-col">
<img src="images/new-menu/sataer.png" width="124" height="17" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="clear"></div>
</div>
</li>
<li class="link-item">
<img src="images/new-menu/menu-item_03.png" width="154" height="41" alt="" />
<div style="display:none" class="sub-menu index-menu-col2">
<div class="sub-col">
<img src="images/new-menu/decor.png" width="53" height="15" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="sub-col">
<img src="images/new-menu/acc.png" width="94" height="15" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="sub-col">
<img src="images/new-menu/out-decor.png" width="120" height="17" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="clear"></div>
</div>
</li>
<li class="link-item">
<img src="images/new-menu/menu-item_02.png" width="152" height="41" alt="" />
<div style="display: none" class="sub-menu index-menu-col3">
<div class="sub-col">
<img src="images/new-menu/lighting.png" width="35" height="16" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="sub-col">
<img src="images/new-menu/electric.png" width="106" height="19" alt="" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="clear"></div>
</div>
</li>
<li class="link-item"><img src="images/new-menu/menu-item_01.png" width="151" height="41" alt="" /></li>
</ul>
和这个JavaScript代码:
$(document).ready(function(e) {
$(".link-item").hover(function(e) {
$(this).children(".sub-menu").slideDown("slow");
});
$(".link-item").mouseleave(function(e) {
$(this).children(".sub-menu").slideUp("fast");
});
当我在Firefox上打开此页面并尝试其中一个菜单时,它会表现得非常奇怪。并且指向的菜单将向下滑动并不断向上滑动。
答案 0 :(得分:1)
问题是因为您只提供了一个hover()
函数,然后会在mouseenter
和mouseleave
上执行。你应该给它两个函数,每个事件一个。试试这个:
$(document).ready(function(e) {
$(".link-item").hover(
function(e) { $(this).children(".sub-menu").slideDown("slow"); },
function(e) { $(this).children(".sub-menu").slideUp("fast"); }
);
});
答案 1 :(得分:1)
看起来您的链接下方有一些“空”区域,导致菜单上下移动。您可以尝试向上移动菜单,以便不会覆盖该空白区域,从而导致执行“mouseleave”功能。
答案 2 :(得分:0)
$(document).ready(function(e) {
$(".link-item").hover(function(e) {
$(this).children(".sub-menu").slideDown("slow");
},
function(e) {
$(this).children(".sub-menu").slideUp("fast");
})
});
答案 3 :(得分:0)
尝试:
$(document).ready(function(e) {
$(".link-item").mouseover(function(e) {
$(this).children(".sub-menu").stop().slideDown("slow");
}).mouseleave(function(e) {
$(this).children(".sub-menu").stop().slideUp("fast");
});
});
答案 4 :(得分:0)
你需要阻止动画队列的建立,尝试这样的事情:
$(document).ready(function(e) {
$(".link-item").hover(function(e) {
$(this).children(".sub-menu").stop().slideDown("slow");
});
$(".link-item").mouseleave(function(e) {
$(this).children(".sub-menu").stop().slideUp("fast");
});