如何解决jQuery动画菜单#hover function
| 我有一个水平菜单,由JQuery设置动画: http://jsfiddle.net/BTD2F/5/ 问题: 我有一个“当前”父项,应显示其ul。如果我悬停另一个父项,则当前显示的ul将被隐藏。如果hover()为\'finsihed \',则应显示该形式的悬浮项并淡出。一切都行不通,应该如此。您可以在jsfiddler上查看代码。 请尝试将鼠标悬停在\'Moda \'上,您会看到问题所在。 提前谢谢了, 拉尔斯解决方法
jQuery(\"#headnav_primary .top-item\").hover(
function(){
jQuery(\'.current-menu-item ul\').hide(\'fast\');
jQuery(this).find(\'ul\').show(\'slow\');
},function() {
jQuery(this).find(\'ul\').hide(\'fast\');
});
在您的标题li链接中添加类“ top-item”。
, 根据需要使用它的浏览器,有两种方法可以显示子菜单。
您可以将JavaScript jQuery代码更改为以下代码,当输入任何<li>
时,它们将仅隐藏所有子菜单,并显示当前<li>
的子菜单。
var subMenus = $(\"#headnav_primary li ul\");
$(\"#headnav_primary li\").mouseenter(function() {
subMenus.hide();
$(this).children(\'ul\').show(\'slow\');
}).mouseleave(function() {
subMenus.hide(\'fast\');
});
或完全删除所有JavaScript,然后添加一条简单的CSS规则,当父“ 1”悬停时,该规则将显示子菜单。
#headnav_primary li:hover ul {
display:block !important;
}
注意:这在较旧的浏览器(尤其是IE6)中不起作用。另外,我添加!important
是因为您当前已在优先级较高的子菜单中内嵌style=\"display:none\"
。如果删除内联样式,则可以删除ѭ6。
编辑:这是仅使用CSS的更好的演示。这在IE6中将不起作用,因为它仅在锚标记上支持:hover
。如果您需要IE6支持,我可以进行更新,但这将使用jQuery。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。