菜单在火狐浏览器上效果不佳
Menu not working very well on Firefox
我有这个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 上打开此页面并尝试其中一个菜单时,它会表现得非常奇怪。 尖锐的菜单会向下滑动并不断向上滑动。
演示页面
看起来您的链接下方有一些"空白"区域,导致菜单上下移动。您可以尝试向上移动菜单,以便不会将鼠标悬停在该空白区域上,这会导致执行"mouseleave"功能。
问题是因为你只提供了一个函数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"); }
);
});
嗯,是的。 悬停函数有两个参数,一个用于"鼠标输入",另一个用于"鼠标输出",但您将鼠标放在悬停之外。尝试更多这样的...
$(document).ready(function(e) {
$(".link-item").hover(function(e) {
$(this).children(".sub-menu").slideDown("slow");
},
function(e) {
$(this).children(".sub-menu").slideUp("fast");
})
});
尝试:
$(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");
});
});
您需要防止动画队列的建立,请尝试以下操作:
$(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");
});
相关文章:
- 如何在火狐浏览器中禁用F5和刷新
- 在火狐浏览器卸载之前
- 如何在火狐浏览器上增加 IndexedDB 的配额
- 多个 socket.io 客户端连接不起作用(谷歌浏览器,火狐浏览器)
- 火狐浏览器不会在前进时触发流行状态事件
- 在火狐浏览器的画布上获取鼠标位置
- d3.火狐浏览器中的鼠标像素偏移量
- 使用量角器打开火狐浏览器的文件网址
- 火狐浏览器 iframe 设计模式不起作用
- $injector:nomod模块“应用程序”不可用!仅限火狐浏览器
- 以编程方式打开火狐浏览器并执行 POST 请求?[想法:MozRepl,建议?
- 为什么我在火狐浏览器中剪辑的图像中有边框而不是铬
- 火狐浏览器与 event.target.id 的问题
- 帖子数据在火狐浏览器上不起作用
- 动态.js在火狐浏览器上很慢
- 关闭火狐浏览器的平滑滚动
- 为什么选择选项上的 .click() 只适用于火狐浏览器
- 窗口绑定在火狐浏览器中不起作用
- 菜单在火狐浏览器上效果不佳
- 从火狐浏览器的上下文菜单中获取菜单项