<分区>
我正在尝试想出一种方法来制作一个通过 jquery 鼠标悬停事件显示的下拉框，并通过将鼠标悬停在原始下拉框的元素上来显示嵌套的下拉框。我写了一些非常低效的代码，我正在努力寻找简化它的方法，以便我可以知道为什么它不能在 IE 和 Firefox 中工作。如果有人有任何建议可以帮助我更好地了解这些兼容性问题是怎么回事，请提供帮助。
这是链接:
http://cs-dev.dreamhosters.com/dropd.php
$(document).ready(function(){
$(".tab, .drop").hover(function(){
$(".tab").css("color","#FF7722");
$(".drop").css("display","block");
$("#tv, .droptv").hover(function(){
$(this).css("color","#FF7722");
$(".droptv").css("display","block");
$(".droptv").hover(function(){
$("#tv, .droptv").css("color","#FF7722");
},function(){
$(".droptv").css("color","#005BAB");
});
},function(){
$(this).css("color","#005BAB");
$(".droptv").css("display","none");
});
$("#interact").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#online").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#vod, .dropvod").hover(function(){
$(this).css("color","#FF7722");
$(".dropvod").css("display","block");
$(".dropvod").hover(function(){
$("#dai").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#iguide").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#vod").css("color","#FF7722");
},function(){
$(".dropvod").css("color","#005BAB");
});
},function(){
$(this).css("color","#005BAB");
$(".dropvod").css("display","none");
});
$("#tablet").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
$("#mobile").hover(function(){
$(this).css("color","#FF7722");
},function(){
$(this).css("color","#005BAB");
});
},function(){
$(".tab").css("color","#005BAB");
$(".drop").css("display","none");
});
});
最佳答案
您的第一个问题是您要在事件上附加事件，例如:
$(".dropvod").hover(function(){
$("#dai").hover(function(){
...
将事件附加到 DOM 元素非常慢，更不用说您将再次重新附加 $("#dai)，并且每次鼠标进入.dropvod 元素。
我的建议是获取要与之交互的元素的句柄，并使用委托(delegate)事件来更新元素，例如:
/* It would be better to create an association between the elements
* For example data-index="1" would relate to the hover to the element to show
*/
$('.drop').on('mouseenter', '.dropl', function (e) {
var id = $(this).attr('id');
$('.drop' + id).show();
}).on('mouseleave', '.dropl', function (e) {
var id = $(this).attr('id');
$('.drop' + id).hide();
}).on('mouseenter', '.hoverable', function () {
$(this).css("color","#FF7722");
}).on('mouseleave', '.hoverable', function () {
$(this).css("color","#005BAB");
});
关于跨浏览器，你的代码似乎在 FF 中工作，我认为 IE 只是在拉屎自己:-)
关于javascript - JQuery 鼠标悬停事件的兼容性问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13731895/
相关文章：
javascript - Internet Explorer 显示本地存储的旧值
javascript - 使用 angular-js 中的 id 突出显示表格的一行
php - 递归php函数问题: works without any result
javascript - 如果 window.open() 被弹出窗口阻止程序阻止，则回退？
javascript - 谷歌地图 V3 setDirections() 回调
javascript - 如何从外部 API 获取输入并通过电子邮件发送
html - 使用 margin minus 是正确的方法吗？
javascript - with() 语句中的函数不接收定义的对象