如何解决jQuery下拉菜单问题:)
| 我正在使用自己的下拉菜单,这是显示隐藏子菜单的代码:jQuery(\'ul li\').hover(function(){
jQuery(this).children(\'ul\').stop().show().animate({ opacity: 1 });
},function() {
jQuery(this).children(\'ul\').stop().animate({ opacity: 0,});
});
一切正常,但子菜单不仅在用户悬停父链接时显示,还在悬停区域显示不可见子菜单时显示。
我相信ul是隐藏的,但是li \不是,所以(\'ul li \')。hover触发了它们。如何避免呢?这是邪恶的,尤其是对于多级子菜单。
示例:http://jsfiddle.net/6t523/(尝试将鼠标悬停在红色正方形上)。
[编辑]
噢,天哪,我注意到当您第一次将鼠标悬停在红色方块上时,什么都不会发生。我不隐藏项目,而是仅使用jQuery将不透明度设为0。啊! :)
然后的问题是-如何优雅地隐藏它们?我的代码可以在IE6 / IE7 / IE8中使用吗?
解决方法
衰落如何:
$(\'ul li\').hover(function() {
$(this).children(\'ul\').stop().fadeIn();
},function() {
$(this).children(\'ul\').stop().fadeOut();
});
现场演示:http://jsfiddle.net/simevidas/6t523/2/
,首先以\'display:none \'的初始样式开始,然后在淡入之前可以使用.show(),而在淡出之后可以使用.hide()。
或者,您可以使用.fadeIn()和.fadeOut()来为您执行此操作。
,您可以添加display:block;悬停并显示时:无;其他。像这样:
jQuery(\'ul li\').hover(function(){
jQuery(this).children(\'ul\').children(\'li\').css(\'display\',\'block\')
jQuery(this).children(\'ul\').stop().show().animate({ opacity: 1 });
},function() {
jQuery(this).children(\'ul\').stop().animate({ opacity: 0,},jQuery(this).children(\'ul\').children(\'li\').css(\'display\',\'none\'));
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。