Question

我有一个水平菜单，由JQuery动画：

问题：我有一个'当前'父项，其ul应显示。如果我悬停另一个父项，则应隐藏当前显示的ul。如果悬停（）是'finsihed'，那么那个形成悬停项目的那个项目将被显示并淡出。所有这些都不起作用，就像它应该的那样。你可以在jsfiddler上看到代码。请尝试悬停'Moda'，你会看到问题。

非常感谢，拉斯

Answer 1

       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');
           });

将标题'top-item'添加到标题li链接。

Answer 2

根据您需要使用哪种浏览器，有几种方法可以显示子菜单。

您可以将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规则，当父<li>被悬停时显示子菜单。

#headnav_primary li:hover ul {
    display:block !important;
}

注意：这在旧版浏览器中无效，尤其是IE6。此外，我添加了!important是因为您当前在子菜单上内联了style="display:none"，这是优先考虑的。如果删除内联样式，则可以删除!important。

修改：a better demo 仅使用CSS。这在IE6中不起作用，因为它仅支持 anchor 标记上的:hover。如果你需要IE6支持，我可以更新，但那将使用jQuery。

jQuery动画菜单#hover function（）

2 个答案: